I’m having my usual fun with charts. Working on mycheckpoint, I’ve generated monitoring charts using the Google Chars API. But I’ve also had chance to experiment and deploy interactive charts, JavaScript based. In
particular, I used and tweaked dygraphs.
I’d like to note some differences in using charts of both kinds. And I think it makes a very big difference.
Static charts
I’ll call any image-based chart by “static chart”. It’s just a static image. Example of such charts are those generated by Google Image Charts (they now also have new, interactive charts), or RRDtool. Show below is an example of a static chart; in this example, generated by
Google:
Pros and cons of static charts
Pros
- Images can be viewed on any graphical platform. Browsers, email clients, cell phones, whatever.
- Self contained: chart image, legend, scales: all in one image.
- As such, easy to move around.
- Are safe to use.
Cons
- Images are fuzzy. Is the com_replace_psec really 0? Maybe it’s 0.1? A larger value can make lower values hard to tell.
- Images are inaccurate: the colors can lie. The red and green lines showing are hard to tell apart. The red is painted above the green. Data gets “lost”.
- They do not zoom (one needs to regenerate larger image)
- Unless encoded with base64, HTML pages which include images need to link outside.
- In the particular case of Google Charts, one is limited to 2K length URL. Trust me, it’s a big limitation! (PS, Google now support POST method to allow for up to 16K. But… it’s a POST method…)
- In the particular case of Google Charts, one must have an internet connection.
- In the particular case of Google Charts, one must submit data to Google.
Interactive charts
Interactive charts are those which react to your commands. These are either JavaScript or Flash based, mostly. They allow for really nice features. Take the following chart as an example: try and move over with your mouse; or select sections to zoom in.
<script src="http://code.openark.org/blog/wp-content/uploads/2010/03/dygraph-combined.js" type="text/javascript"/>
DML
[graphDiv]
[labelsDiv]
<script type="text/javascript">// < ![CDATA[ // < ![CDATA[ g_DML = new Dygraph( document.getElementById("graphDiv_DML"), "Date,com_select_psec,com_insert_psec,com_delete_psec,com_update_psec,com_replace_psec\n2009-12-04 15:00:00,113.28,76.54,26.14,29.54,0.00\n2009-12-04 15:10:00,91.51,55.74,30.07,18.13,0.00\n2009-12-04
15:20:00,104.98,57.75,28.26,18.24,0.00\n2009-12-04 15:30:00,110.64,72.17,30.17,27.58,0.00\n2009-12-04 15:40:00,97.79,46.27,29.27,15.91,0.00\n2009-12-04 15:50:00,114.35,61.85,29.55,22.45,0.00\n2009-12-04 16:00:00,110.82,72.3
Truncated by Planet PHP, read more at the original (another 8878 bytes)