I’ve been playing lately with SVG visualization using the excellent d3.js library. I've originally chosen d3.js because I needed to create highly customized visualizations and d3.js is a great tool for dealing with lower level visualization.
some of the visualizations included gauges. In many of my products I use google's gauges, but in this case I needed to support offline mode, and google's charts require an internet connection. so I decided to go ahead and rebuild it using d3.js.
below are links to the code and example
http://bl.ocks.org/1499279
https://gist.github.com/1499279
note: the transition effect of the "pointer" still needs love, feel free to fork or otherwise contribute.
Monday, December 19, 2011
Subscribe to:
Post Comments (Atom)
great code, thank you for sharing :)
ReplyDeleteHi Tomer, I wanted to thank you for sharing. At what point is the label for the min and max written? I can't seem to see that - or is it automatic from d3?
ReplyDeleteunder "if (major == this.config.min || major == this.config.max)"
DeleteThanks ... exactly what i was looking for .
ReplyDeletei have created widget for the same . and now dealing with resize of the same .
but not able to get my chart object . can you please help me ?
resize: function (width, height) {
var self = this,
o = self.options;
o.chartJson.chart.width(width).height(height).render(); /// This one is working nice with barchart or linechart which are ready to use in d3.js
}
thanks again for great codes .
Hi Tomer,
ReplyDeletei got solution for re sizing , i have removed it and readded chart on same div with new height and width .
Thanks again for your excellent work .
Hi @tomerd,
ReplyDeleteReally Awesome
great
ReplyDelete