Tuesday, December 4, 2007

Flot 0.1 released!

We've released the first version of Flot, a new Javascript plot library for jQuery!

It draws on inspiration from Plotr and PlotKit, and several other commercial packages. But also from venerable old gnuplot - there's nothing more boring than hand-picking axis scales so I wanted the default algorithm to be smart.

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.

I find it interesting that I initially thought plotting to be a hard problem - but this project got started a couple of months ago and I've only been hacking on it sporadically. Right now, the library is still missing support for time series, but is otherwise pretty much feature-complete for what we need it to do. I'm looking forward to hearing other people's opinion.


  1. Excellent Work, Thanks for contributing.

  2. Very cool! I hope to use this to replace the flash graphs on this page. They look nice but they're really hard to work with.

    Rather than invoking the plugin with:

    $.plot($("#placeholder"), data, options);

    it would be more in keeping with jquery convention to use:

    $("#placeholder").plot(data, options);

  3. Thanks. :-)

    About how you invoke it: the plot function needs to return a Plot object so it's not really chainable. I didn't want to risk any confusion so I opted for the $. syntax.

  4. Looks really nice.
    Any plans on supporting pie charts in the future?

  5. I find this little slow. This is useless since Flash charts are much faster.

    Your product is great! You've done really good work, I just don't think we can do such things as charting with JavaScript..

  6. elvelind: You're not the first to ask. I don't think it's hard to do, but it's going to need a bit of thought because pie charts are very different from xy graphs.

    zero0x: What parts of it do you find slow and in what browser? Maybe we can optimize it.

    I'm not too worried, though. Flash is sure faster for animations, but Flash loading is still horribly slow on older hardware, and Javascript interpreters keep getting better.

  7. I think zeroox misses the most important part of flot -- no need for proprietary technology (Flash)...

  8. Personally,

    I find flot to be quite responsive for much of what I need todo. It's also really flexible for a lot of uses.

    Yes, Flash charting is here to stay for a lot of purposes, but Flot really does have a lot going for it. Not the least of which are the simple deployment and ease of use.

    I've made some modifications to flot to suit my purposes (support for normal ranges & simplified rendering for sparklines) Would you be interested in the code? How should I get it to you?

  9. You did a great job. It's nice to see you looked at Plotr and Plotkit, and learned from their design flaws. Keep it up!

  10. Thanks!

    Don: Sure, I'm interested. You can contact me at olau@iola.dk. I'm beginning to think I'll have to start a mailing list or something like that.

  11. The graphs look very nice, the look is polished, good job! I was working on a very similar project a few months ago but kind of abandoned it. The problem with Canvas (which I also used) is that it doesn't work on IE; what could be done, I think, is provide a fallback using a Flash object instead of the Canvas.

    In the mean time I'll be using your nice plugin for my graphs. Thank you :)

  12. I'm glad you like it. IE shouldn't be a problem, there's a Javascript emulation helper called excanvas that does the job.

    If you take a look at the Flot examples, they're using it and rendering fine on my IE 6.

  13. I did look at them in IE6, and they don't display. But maybe it's my particular IE6, it's on a stripped-down installation of windows. They look fine on another machine witn IE7. My bad. :)

  14. alex: Can I persuade you to try again and see if it works now? I've tried turning off compression on the webserver.

  15. Nope, still doesn't work on my IE6.

  16. Good stuff! I've already begun using it in a new project of mine. I found the documentation a bit lacking but sifting through the source code of your examples really helped out and everything is looking good.

    Looking forward to any updates you may have in the future!

  17. This comment has been removed by the author.

  18. very nice, makes jQuery even stronger , should be considered for inclusion in the JqueryUI!

    I wish it will be possible to plot experimental data-errors together with the x-y point!


  19. Very cool. Yup, this should be placed in JQuery UI...

    I hope they make it animate a bit.
    I am using fusioncharts, amcharts, etc. so if they can get the good parts from this chart tools. I'll definitely switch my codes to use this one :)

    Cheers, keep up the good work

  20. Sick, I'll try this! The charts from xmlchart-flash lib I'm currently using doesn't fill gaps in the data (say, if you have something that ranges from 0-10 on the X-scale, but one of the values is missing in Y1 or Y2.)

  21. window.G_vmlCanvasManager has no properties

    canvas = window.G_vmlCanvasManager.initElement(canvas)

    error when viewing in Firefox

  22. Michael: You should only include excanvas.js in Internet Explorer. If you look at the examples, there's a special IE inclusion guard on the lines where excanvas.js is included.

  23. Thanks for developing Flot, it really helped a lot. I'm currently using flot to view realtime sea tide height for a institution. I've had a hard time looking for great plotting engine in javascript, come across some very excellent and very expensive plugins too. But still i think that flot suited the best, and plus, it runs quite fast, although it don't have any animation effects.

    I'm also thinking about some enhancement in it, such as tooltip when you are hovering over a point. It could be really usefull to have that in flot.

    Anyway, just wanted to say thanks, you've done a great work here.

  24. Really good work, Do you providing a pie chart also ?

  25. If I wanted to set a timeout and call the $ function. What's the proper syntax for it? I've tried:
    window.setTimeout("$();", 50);

    But does not seem to work. Help!

  26. Anonymous: $(function ...) is shorthand for $(document).ready(function ...) which means: bind a callback function to be fired when the document is ready to be manipulated. Most likely, what you want is something along

    $(function {
      function doStuff() {
      setTimeout(doStuff, 50);

    A common problem with callback functions is that you usually want them to evaluate lazily. So you can't just say setTimeout(doStuff(foo), 50) since that would evaluate doStuff at the moment you're calling setTimeout as opposed to in 50 ms when the timeout occurs. In this case you need to say setTimeout(function () { doStuff(foo); }, 50).

    I suggest you go through the jQuery tutorial if you haven't already.

  27. Hi,

    It looks really nice and is functional. I am using it on a new website I am developing. I will post a link once I have finished.