I'm a huge charting fan. I don't know why - maybe it's my simple mind having an issue time with shiny pictures than raw numbers. For some time now I've been meaning to take a look at flot, a jQuery based chart engine. If you take a look at the examples you can see they look pretty darn professional and even better they are pretty simple to use.

For the simplest chart, you only need two things:

  1. A div. This is where the chart will be displayed. You must provide a specific height and width for the div or the world will come to an end.

So for example:

<style> #chart { width:300px; height:300px; } </style>

<div id="chart"></div>

  1. The data. This is where things got a bit confusing for me. The data for flot is an array of series records. Each series representing one line of data. A series can either be a structure (well, that's not a JavaScript term) or an array itself. Finally - each point of data is itself an array as well.

Here is a very simple example:

<html>

<head> <style> #chart { width:300px; height:300px; } </style>

<script src="/jquery/jquery.js"></script> <script src="/jquery/jquery.flot.js"></script> <script>

$(document).ready(function() {

$.plot($("#chart"), [ [[1,3], [5,99], [20,14.01]] ])

}) </script> </head>

<body>

<h1>Flot Test1</h1>

<div id="chart"></div>

</body> </html>

You can see that I include jQuery and the flot library. When the page loads, I run the plot function and pass it the DOM item I want to "chartify" and the data itself. You can view a demo of this here. What's impressive is how nice it looks. The library picks nice default colors and just renders everything well.

A more complex example uses structs for each series and specifies a label:

$.plot($("#chart"), [

//series 1 { label:"Beer Consumption", data:[[1,3], [5,99], [20,14.01]] },

//series 2 { label:"Session Ratings", data:[[1,80], [3,21], [17,53]] }

])

You can view this here. View source for the complete code but the code block above is really all that's changed.

The plot function also takes a third argument which allows for strong customization of the chart itself. So for example, I can tweak the legend to allow for clicking:

legend: { show:true, labelFormatter:function(label) { return '<a href="' + label + '">' + label + '</a>'; } }

You can view this one here, but don't bother actually clicking the links.

So what about putting in real data? Remember that jQuery makes it pretty trivial to run AJAX calls, and ColdFusion makes it pretty trivial to search up JSON. So given this method:

<cffunction name="getSalesData" returnType="array" access="remote"> <cfset var q = "">

<cfquery name="q" datasource="cfartgallery"> select count(orderid) as orders, year(orderdate) as yearval from orders group by year(orderdate) </cfquery>

<cfset var result = []> <cfloop query="q"> <cfset var point = [yearval,orders]> <cfset arrayAppend(result, point)> </cfloop>

<cfreturn result> </cffunction>

The method runs a query against the cfargallery database. It converts the query into an array of arrays. Now for the jQuery code:

$.getJSON("salesdata.cfc?method=getsalesdata&returnformat=json", {}, function(data) { $.plot($("#chart"), [ data ], { lines:{show:true}, points:{show:true} }) })

Pretty simple, right? Hit the CFC and pass the data into flot. On reflection I probably should convert the data client side and leave the CFC as is. You can view the demo here. You can view another version of this here, this one using 2 sets of data from the CFC.

Anyway - check it out yourself. The docs cover a lot more than what I did. Two things you should note. The released version does not support IE8. (Cry me a river.) Secondly, this works fine in AIR. So if you are building an HTML-based AIR application this would be a great charting solution I think.