JQuery dynamic charts

[garypigott]

There are some fantastic JQuery plugins available for producing dynamic bar charts (see blog post http://www.spiced2.com/10-jquery-graphs-charts-plugins/); I tried about half a dozen of them and just couldnt get them to work the way I wanted to.

In the end I resorted to writing my own, and there is a really useful (and easy to follow) video tutorial series that tells you how to do it - http://www.ssdtutorials.com/tutorials/series/bar-chart-jquery-css.html, there are also sample code snippets to have a look at.

If you want to see my implementation of this have a look at the article on http://cybernet-computing.com/work/web-projects/diocese-rochester; or visit the live site http://www.diakonialtd.co.uk/work/rochester/; select the Summary option and then you can see the Bar Chart/Pie Chart tick boxes (the pie chart option is using Google Charts API). The JQuery code is in the chartme.js file with the corresponding CSS in chartme.css.

[jim]

Nice one Gary. Yours could easily top the list for style. How long did it take you to write the JS?

[garypigott]

Once I'd found the tutorial it didn't take too long, the main problem I had was that I probably spent 2 days experimenting (unsuccessfully) with the various pre-written plugins.

There were a few gotchas on the way including the fact that by default browser print hides background colours/images so when the "customer" was hitting the print icon the bar charts were blank (I got round that by using a 1px coloured gif sized to the dimensions of the bar, which is hidden in the non-print stylesheet).

Anyway really good fun to do, and it has helped me to appreciate the power of JQuery.

Another useful bit of JQuery on the page is the tablesorter (not written by me) and its really easy to implement, it gives full sorting to any table (website is http://tablesorter.com) and they even provide the CSS and associated images.

[David]

Nice work Gary. I've been playing around with jqPlot (http://www.jqplot.com/) and managed to get it working with my web traffic stat data pulled from a database. I tried a few different plugins but jqPlot seemed to be the best free option. Here's my test page (http://www.cadtutor.net/general/statistics_test.php) for this. I'm using PHP to format the raw data pulled from the db before feeding it to the plugin. It works pretty well but I found I had to do some fiddling to get it looking exactly how I wanted.

[garypigott]

The graphs on flot look great. I wanted bar charts for mine and tried a variety of the plugins (jqplot, jsxgraph, jgchart, tufte-graph etc) but just couldn't get a consistent chart look that I liked - on one of them (can't remember which one) the first chart looked good, but then for some unknown reason the others went all over the place.

I also had a play with JGCharts plugin which works with the Google Charts API - again loads of issues, so resorted to reading the Google Charts API documentation and then writing my own version.

Like your page I used a PHP script to format the data (from a flat file structure out of an Access db) this builds a ParishActivity XML file, all of the navigation and (most of) the tables used and then the JQuery does the rest for the charting and building dynamic tables (from an XML file) for the Activity by Parish.

Anyway just shows the fantastic stuff you can do with JQuery (and PHP) on the web, my aim was to get (almost) spreadsheet functionality for a demo.

Cheers

[David]

Hmm, I didn't try Flot (http://code.google.com/p/flot/) but it does look good. I'm looking at it now, the API isn't as easy to work with as jqplot. On the other hand, it's far more flexible if you just want a graph.

[garypigott]

I'll probably have another play with the jqplot stuff, as its all good fun (and the mouseover effects are a nice touch) - these kind of effects fit in really nicely with the "Info Graphics" stuff that Prisca has just been covering.