A library for gauges, charts or data visualisation
There are certain drawing and graphic libraries in Javascript that can be considered for:
- drawing charts,
- doing some data visualization for the website,
- using them as gauges / clocks for the mobile client
(gauges can be used in limited manner on the website as well).
This article deals with most interesting ones that you may consider for above purposes.
Contents
D3
D3 is a great Javascript library for data visualisation, but not only for drawing chars, as it also supports maps, diagrams, counters, etc. More information at GitHub and Wikipedia.
There are some examples on using D3 for drawing different gauges:
- bubble-like gauges (here for ticket status, but useful speed etc. as well),
- typical clock-like gauges,
- standard, typical clock,
- rotating gauge needle.
There’s also a great looking speedometer, but here we only have a gist code and PNG screenshot, and when it is actually run in the browser, it does not work and it throws maximum call stack size exceeded error in polymer.min.js. So it can have some nasty bugs in it or it does not work at all.
The biggest and the most painful problem is, that D3.js is huge. Even minified, it has 168 kB. So it probably might only be considered for the website, not for the mobile client.
morris.js
morris.js can be considered a light-weight option (it has 10 kB minified size + it requires 91 kB minified+gzipped Raphael 2.0). For the website (loczilla.com only!) — charts — another plus is, that it comes with ready Yii plugin.
For mobile client — gauges — it can be considered only, if it works on Zepto (officially, it supports jQuery only). morris.js by itself does not provide anything about gauges, but Raphael 2.0 behind it does and can be used for drawing gauges according to this article and this Stack Overflow answer.
Other
There are two other libraries, that can be considered for gauges only (so mainly for mobile client and in a limited manner for the website):
- justgage.com produces nicer, better looking gauges and draws them on pure SVG, so mades them available in very large range of browsers, including very old ones, like IE6 or old Android native browser. But, it is based on Raphael 2.0 (more code needed), so, it might be slow in mobile client, especially on old Android 2.x devices.
- gauge.js produces not so pretty (but still cool) gauges and it is written in native code (no library dependency), so is very small, quick and customizable. But uses canvas and we had some problems with it on old Android 2.x devices.
So, both need to be tested in war environment, when we’re talking about mobile client.