Wednesday, December 5th, 2007

Plotting in jQuery

Category: Canvas, jQuery

Drawing on inspiration from Plotr and PlotKit, software developer Ole Laursen wanted to bring the same plotting functionality to jQuery. So he built his own jQuery plugin and called it Flot. While a bit oddly named, the first release of Flot, v0.1, already provides some impressive capabilities:

The project actually got started because we were growing dissatisfied with Plotr which looks nice but is pretty dumb when it comes to auto-detecting stuff and didn’t have any interactive features which we needed for a custom web-based business intelligence application.

Demos of the Flot plugin can be found at Ole’s site. The code for the plugin is hosted via Google Code.

Posted by Rey Bango at 8:30 am

4.6 rating from 201 votes


Comments feed TrackBack URI

Actually quite a cool name.. flot means cool/good in most nordic languages and this plugin is all that.

Comment by atlithorn — December 5, 2007

this is a fantastic plugin love it, very smoothly drawn good automatic scaling will be watching this grow and hopefully using it.

Comment by James Dempster — December 5, 2007

@atlithorn: Thanks for providing the explanation. Very cool name indeed.

Comment by Rey Bango — December 5, 2007

@atlithorn: Actually, You’re wrong. You’re thinking of ‘flott’.

Either way, this plotting plugin looks rather good. Would be great with some interaction, though.

Comment by Andy — December 5, 2007

Congratulations Ole, I was long waiting for a plotting library in jQuery and you far exceeded what I was expecting:-) Moreover I really needed something like this by this weekend: great timing also! I’ll drop by your office before Christmas…

Comment by 3Handles — December 5, 2007

@Jörn Zaefferer: Ah, yes. I missed that. Anyway, it would nice if You could mouse-over the dots and it would display the value.

Comment by Andy — December 5, 2007

This is going to be great for custom analytics, I’ve been making my charts and graphs with HTML/CSS. Nice work, Ole.

Comment by Marc — December 5, 2007

@Andy: Not to continue this needlessly, but I find the need to correct your correction. In Danish, “Flot” does mean “pretty” (I don’t agree with atlithorn’s perception that it’s cool, although I see where he’s going it), and since Ole Laursen is Danish, I think it’s safe to assume that’s the intention. In Swedish however, it is called “flott”. So you are yourself wrong :-)

Comment by holst — December 5, 2007

Err… substitute “it” for “at” in the parenthesis.

Comment by holst — December 5, 2007

test comment plus

Comment by bhennessey — December 5, 2007

Now that is some sweet charting goodness. There are too many good bits in all the frameworks. I want them all in one :D

Comment by Site Smart — December 5, 2007

hmm. could need something like that for prototype

Comment by DarkRat — December 5, 2007

Great tool! The zooming and selection features seem to work very smoothly. Especially the last example is quite impressive.

Comment by Gwion — December 6, 2007

OH…. good. But what are you thinking about FusionChartsFree?
I think FusionCharts is greate charts library and they have free version of his charts. I recommend to try it…

Comment by YouNeedJava — December 6, 2007

It looks great! I like it.

Comment by Flesler — December 6, 2007

Hmmm… I’ve been meaning to play around with mootools more… might have to port this over to that.

Comment by jrrl — December 6, 2007

Oh how lovely this is. Will integrate nicely with loads of things Im working at.

Comment by WebmonkeyIreland — December 6, 2007

Nice tool! I saw it yesterday on and just tried it out. I played a little bit around with it and got that (very simple):

One question:
I tried to format the legend with
yaxis: { noTicks: 0 },
xaxis: { noTicks: 0 }}
But this didn’t work properly (nothing could be seen).
I fixed it using a TickerFormatter like
yaxis: { tickFormatter: gettick },
xaxis: { noTicks: 0 }}
function gettick(val) {
return “”;

The workaround is simple, but, however, it is a little bit strange.

But I like the tool! :-)

Best regards!

Comment by internetschach — December 6, 2007

The easiest way to disable ticks is to specify an empty ticks array:

xaxis: { ticks: [] }
yaxis: { ticks: [] }

I’ve explained this in the API documentation now. noTicks is a bit weird because it uses a heuristic instead of being exact. Hope this helps. :-)

Comment by olau — December 7, 2007

Oh yes, this is easier! :-)

But I tried to find out the best way to create a chart with bars.

I use the following statement to declare the data:

{data: [[0,28], [0,28]],label: “label goes here”,bars: {show: true } },

I think it is a little bit redundant to specify [0,28] twice, but if I try something like
{data: [[0,28]],label: “label goes here”,bars: {show: true } },
only the legend is shown, but no bars. What am I doing wrong?

(maybe it is a stupid question because it works if I use the first statement, but it seems to me that even the bars are painted twice, so the colors (originally pastel colors) are much darker.

Best regards!

Comment by internetschach — December 7, 2007

Hm, this seems like a bug. Would you mind entering a bug report here so I don’t forget about it:

Comment by olau — December 12, 2007

Leave a comment

You must be logged in to post a comment.