Question

Is it possible for someone to give me a few pointers on how to display a multidimensional array in the form of a bar graph?

The array is multidimensional, with three elements in each part – and the elements are determined by a HTML form.

So if it is possible to display this kind of array in the form of a bar graph in Javascript on a standard HTML site, i’d appreciate some help!

Thanks

Answer 1

Check out Flot and MilkChart. The former extends jQuery, the latter MooTools. Both use the canvas element, which is now supported by all the major browsers (even IE with the inclusion of an extra script). Take a look at the reputation tab in your stackoverflow profile to see it in use. I’ve used Flot (haven’t tried MilkChart) in a project before and while the manner you pass data into it can seem a bit unintuitive at first, you’ll find that it is actually pretty powerful for a non-flash charting solution. Flot also defines custom events that you can use to define chart interactions. Flot supports stacked bar charts with a plugin, and I believe you can do clustered bar charts with it as well.

You could always go with some sort of declarative graphics solution using div elements as bars in a graph, but that’s not as easy or consistent across browsers as drawing charts with the canvas.

If you are leery of either of those solutions you could send the data to a service to return a static image. The Google Charting API supports grouped bar charts, or you could use some service you host yourself.

My recommendation is the first solution using the HTML canvas, specifically leveraging Flot since that is the library I have the most experience with and can vouch for. Maybe someone else has some comments about MilkChart.

EDIT:

Another library I forgot to mention is PlotKit which extends MochiKit. I haven’t used it but apparently it supports not only the charting using the canvas element but also supports charting using SVG. Scalable Vector Graphics offer you another declarative graphics option beyond hacking a solution using HTML, however I’m not sure how crossbrowser an SVG based solution would be (particularly in IE).

EDIT:

Here is a jQuery plugin which charts using div elements. I personally don’t like this option because I think it is more complex and less easily configurable than some of the other options. I feel like using HTML elements to create complex declarative graphics (while impressive) is sort of a hacked solution and will, in my experience, cause problems at some point.