Create client-side charts with Highcharts

I’ve stumbled across a Highcharts announcement on ajaxian.com a few days ago. Highcharts looked like something I’ve been (passively) looking for for years: a simple tool that could take values generated by the server and turn them into a fancy graph. It lived up to the promise: after struggling with it for a few hours, I’ve deployed my first chart-on-a-page to production (note to myself: still have to fix the caching issues).

The tool works great, but there are (as always) a few hidden gotchas:

• The reference manual gives you all the information, the How to use page is somewhat cryptic.
• The demo pages show you incomplete code; all the formatting parameters are missing.
• Although it’s obvious in the hindsight, the documentation “forgets” to mention that you have to style all the elements of the graph, otherwise you’ll get a nice white-on-white nothingness. You can dig through the demo code to find the routines that do that (they’re hidden in a JavaScript file) or look at my code.
• Another missing bit: if you want to apply the same format to multiple graphs, set the default options with the Highcharts.setOptions(chartFormat) call.
• Last but not least: the series parameter is an array of objects (each object having at least the data property). If you read the documentation too literally and define series as an object (not array), you’ll get a nicely formatted empty canvas (assuming you’ve got the formatting parameters in place).