Hi, I'm Chris Moyer's Blog.

Flot - Slick jQuery Graphing Plugin

I read about Flot a couple months back and have wanted an excuse to play with it, as it looked pretty slick. Unfortunately, not actual opportunity presented itself, so I had to just make something up. The neat thing is how simple it is to make a basic graph, but how you can achieve some awesome effects through various options. The latter examples on the Flot site show of some great features.

Simple Flot Example

var data = [[0,0], [1,1], [4,5], [123,2], [12.3]];

$.plot($('#graph_area'), [data]);

And that's it. You need to make sure and have dimensions defined for the target element, and Flot will automatically scale your graph based on your data. If you want more data sets, you pass in more arrays inside the secord argument. plot() also takes a third argument, options which lets you controll the appearance and more advanced features.

Back to Blog Home »