Wednesday, December 5th, 2007
Plotting in 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.
4.7 rating from 180 votes
Actually quite a cool name.. flot means cool/good in most nordic languages and this plugin is all that.
this is a fantastic plugin love it, very smoothly drawn good automatic scaling will be watching this grow and hopefully using it.
@atlithorn: Thanks for providing the explanation. Very cool name indeed.
@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.
@Andy: Check the Zooming with overview demo, which allows you to select an area in the overview to zoom in on that area in the main diagram.
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…
@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.
This is going to be great for custom analytics, I’ve been making my charts and graphs with HTML/CSS. Nice work, Ole.
@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 :-)
Err… substitute “it” for “at” in the parenthesis.
test comment plus
Now that is some sweet charting goodness. There are too many good bits in all the frameworks. I want them all in one :D
hmm. could need something like that for prototype
Great tool! The zooming and selection features seem to work very smoothly. Especially the last example is quite impressive.
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…
It looks great! I like it.
Hmmm… I’ve been meaning to play around with mootools more… might have to port this over to that.
Oh how lovely this is. Will integrate nicely with loads of things Im working at.
Nice tool! I saw it yesterday on del.icio.us and just tried it out. I played a little bit around with it and got that (very simple):
http://internetschach.de/verein.aspx
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 }}
with
function gettick(val) {
return “”;
}
The workaround is simple, but, however, it is a little bit strange.
But I like the tool! :-)
Best regards!
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. :-)
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!
Hm, this seems like a bug. Would you mind entering a bug report here so I don’t forget about it:
http://code.google.com/p/flot/issues/list
good