Recently I’ve been creating a lot of custom reports. You know the kind, sales reports, analytics reports, accountability reports. Reports that are rather boring, after all how do you make a table interesting. Why charts of course! For this I’ve been using Highcharts for hitting all the main points, it’s Free, jQuery compatible (heck, it’s jquery based), and well documented. So lets talk about charts.

Getting the Data

First step of any graph is to get the data sorted out. Highcharts like the data as either an array (of more arrays if needed) or an object. For today I’m going to cover the classic bar/chart – although highcharts supports many other graph types if your looking for something a bit different.

For this example, were going to say were getting all the cars from an imaginary database. While we generate our properly formatted array were also going to create the X axis labels, doing this at the same time makes things just a tad easier.

This is a good time to mention that none of the code in this post has actually been tested, so it may have some minor issues, if theres anything more than a missing semi-colon let me know and I’ll correct it, but after writing a bunch of them this week I don’t think they’ll be any issues.

Now that code should give us a nice javascript array, two of them in fact, that look something like this.

The Javascript

Now we have that done all we have to do is set the actual script up. First thing you need to do is grab the highcharts source, you get get that on their site right here. It’s probably a good idea to take a look at the included examples and the API reference as well, it’s a very complete script and I won’t be covering it all here (at least not today).

Next we need to place a div where you want to element and, this is important, give it a width and height. Highcharts required a sized location to put the grid in. Once you got the div in place you’ll need to set up some javascript framework.

Now theres a lot to that, and I could write pages and pages on it and not cover it as well as going through the api, reading the function and playing around the will. So for now lets just focus on the highlighted lines.

Line #4 is the container your going to render the chart too, this only supports ID selectors, so plan accordingly.

Line #5 is the chart type, all your major players are present, as well as some of the more obtuse options. In the highcharts download there are examples for most if not all chart options, it’s probably the easiest way to see what there all about.

Line #8 is the charts title, like the x and y Axis titles you can remove it by passing a blank string or null.

Line #14 is the categories, these will be the names under which the chart displays, in this example were echoing the appropriate javascript array we created earlier in the PHP.

Line #49 is the data, since were not getting fancy we can just straight output the javascript array we created earlier.

As you can see that only impacts the surface of what it can do. I really do suggest taking a look at the very well crafted highcharts api reference.

Getting Advanced

I’m not going to get into anything more advanced that creating a simple column graph here, at least not today. However if you looking for a more interesting way to present the data highcharts has all sorts of options from prie/donut charts to multiple charts of completely different types on a single graph.

It also suports loading data via ajax for live updating charts, full visual customizations of the charts, click events for awesome javascript interactive charts – really everything you could conceivable want. Like I said I could write pages and pages and not cover it all so I really do suggest you check out that documentation and examples included in the downloads.

I’ve used it pretty extensively the last couple days at work, so I’m pretty versed in it (which is part of the reason for the brevity of this post, I’m kinda burnt out on it at the moment). As I said this post wasn’t tested like most, so if somethings broke let me know and I’ll make the correction. You can leave any comments here or at the relevant google plus posting.