Take a look at jQuery Flot

This post is more than 2 years old.

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 = "">
&lt;cfquery name="q" datasource="cfartgallery"&gt;
select count(orderid) as orders, year(orderdate) as yearval
from orders
group by year(orderdate)
&lt;/cfquery&gt;

&lt;cfset var result = []&gt;
&lt;cfloop query="q"&gt;
	&lt;cfset var point = [yearval,orders]&gt;
	&lt;cfset arrayAppend(result, point)&gt;
&lt;/cfloop&gt;

&lt;cfreturn result&gt;

</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.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Andy Sandefer posted on 10/2/2009 at 9:46 PM

This looks pretty interesting. I'll probably stick with cfchart because I love the simplicity but this would be pretty nice if you didn't have a ColdFusion or FLEX solution at your disposal.

Comment 2 by Timothy posted on 10/2/2009 at 10:00 PM

Anyone using the COOP custom tag library who would like to try out a COOP tag wrapper for the flot plugin that we wrote about a year back, drop me a message at timothyfarrar@sosensible.com, and I'd be glad to send it your way.

Comment 3 by Henry posted on 10/2/2009 at 10:05 PM

Hi Ray,
I recently implemented this for a client of ours, and one thing I noticed is IE doesn't handle it unless you include the canvas pack (IE8 anyway).
< !--[if IE]><script src="/js/excanvas.pack.js"></script>< ![endif]-->

I think it's a great charting plugin.

Henry

Comment 4 by James Moberg posted on 10/2/2009 at 10:56 PM

I recently started using ChartDirector because I couldn't get what I needed out of CFChart and I didn't know of any way to embed a Flash-based version into a PDF for a consistent web-to-PDF experience. This was both more powerful and flexible. Check it out and the free download comes with sample CFM templates for 177 different graphs.
http://www.advsofteng.com/c...

Comment 5 by Andy Sandefer posted on 10/2/2009 at 11:33 PM

@James Moberg
I checked out your link and it looks like a pretty awesome product. Is it difficult to use in comparison to cfchart? I'm working on a lot of manufacturing projects and I noticed that ChartDirector has a Gantt Chart - this would be totally beneficial to more than one of my clients. What was the learning curve like with this product?

Comment 6 by Todd Rafferty posted on 10/3/2009 at 12:35 AM

For the curious:
FireFox 3.5.3 (Windows): Works
Google Chrome 3.0.195.x (Windows): Works
Opera 10.x (Windows): Works
IE8 (Windows): Bombs - Workaround listed above
Safari 4.0.3 (Windows): Works

That's pretty good!

Comment 7 by James Moberg posted on 10/3/2009 at 12:41 AM

Learning curve? It's a little more difficult than using CFChart as everything is not defined in a couple of CFTags. The feature setis like merging CFImage and CFChart. You can control every little detail and the sample CFM templates and CHM help file provide lots of helpful samples. (Download and review the source.) Installation was easy, it's extremely fast and highly customizable. Adobe should consider getting a royalty free redistribute license for $750 and including it in their product.

Comment 8 by Dave posted on 10/3/2009 at 3:50 AM

Wow. very cool. I was looking for a charting solution for a project I am working on in the iPhone called jQTouch http://www.jqtouch.com/
This will work great with jQtouch jquery support.

Nice!

Thanks Ray.
Dave

Comment 9 by Dave posted on 10/3/2009 at 3:56 AM

@James

Thanks for that link to ChartDirector. That looks likes another great way to serve non flash charts to the iPhone.

Dave

Comment 10 by chuck posted on 10/3/2009 at 10:51 PM

We use Raphael in my office and while flot seems better for normal graphs you can make some amazing pie charts ect with raphael

http://raphaeljs.com/

Comment 11 by Phillip Senn posted on 10/6/2009 at 5:41 AM

Here are some charting links I've found interesting:

http://www.ted.com/talks/la...
http://code.google.com/apis...

Comment 12 by eremiya posted on 10/22/2009 at 12:27 PM

Hey, cool intro!
Take a look at my post. I did somthing similar.
Glad if that can help!

Comment 13 by eremiya posted on 10/23/2009 at 11:17 AM

Oops! Here is the link to my post!
http://eremiya.net/