Flotr2 : a library for drawing HTML5 charts and graphs

[zmmmmm]

Beautiful, only complaint is it's 100kb minified - that's a lot of JS. Would love to know if there is any kind of modularization (if I only need 1 kind of chart can I lose some of the weight?).

[simonsarris]

Oh dear. 100kb is bad for this sort of thing? Does anyone know if that's a commonly held view?

I've been working on a Canvas library for full-powered diagramming for a year and a half and it currently weighs in at 597kb minified. (private alpha going on right now, so its nearing final size)

It's super awesome and covers an enormous amount of enterprise diagramming needs like customizable nodes, links, layouts, an undo manager, data binding, models, overviews, events, commands, tools, you get the idea.

But do you think people will reject it based on the size? Do you think not having a slimmer version would be a deal breaker?

[cesutherland]

Maintainer here. It is ~30kb gzipped, and is modular but there is no modular build yet. Individual plugins and chart types are not required, which cuts out a lot of the size.

The 100kb minified unzipped is a concern of mine, however. As the library evolves, keeping it trim and trimmer is a goal.

[altrego99]

This reduces to less than 30kb zipped. Time has come when browsers start supporting zipped javascript files, I guess.

[wamatt]

Purdy! But yah that's a lot of bloat for eyecandy.

[rorrr]

It's 31KB gzipped. This is nothing.

[Swizec]

It seems I always stumble upon these awesome graphing libraries right before I'm supposed to post an interesting dataset somewhere.

This invariably results in complicating my life far beyond what is reasonable and never managing to publish the dataset/graphs because it's too fun figuring out how everything works.

[RBerenguel]

Stick to something (like d3js,) it's what I've decided to do.

[mbell]

Well done, will likely use.

My only criticism right now is that your demo site breaks back button functionality (click on a chart on the landing page and then hit back to see what I mean).

[cesutherland]

Demos definitely need work!

Edit: back button should be ok now.

[gourneau]

Version 2 has a lot of great new features. The went in search of this because I need to draw a client side chart with 300,000 points on a scatter plot, and I wanted to see if canvas could do it. Turns out it can. At least with Chrome http://jsfiddle.net/vN4C3/

[mey]

Is this suitable for realtime streams of data?

Looking for something easier to work with then d3.js/cubism.js.

[TwistedWeasel]

I'm working on something like that but it's very far from ready. I'm interested in any feedback...

http://frasergraham.github.com/live_stats.js/

[karmi]

Cubism is pretty easy to work with, or? See my heavily annotated sketch of continuous polling with Cubism; http://bl.ocks.org/2689616

[cesutherland]

d3 and cubism are great.

I have written another library, envision.js, which is more suitable for realtime data. Here's an example: http://humblesoftware.com/envision/demos/realtime. Envision here is adapted to Flotr2, but working with it is higher level than working with Flotr2 directly.

[gridspy]

Wow! Looks great for Gridspy ( see http://your.gridspy.co.nz/demo/ )

We need to visualise power usage data in the browser. The more tools we have the better. We're currently using dygraph but this looks much more flexible. I hope that the browser support is good.

[cesutherland]

Thanks for the feedback. Please check out another project of mine, Envision.js: http://humblesoftware.com/envision/

Envision is a visualization toolkit for fast composite, interactive and animated visualizations. It's adapted to work with Flotr2.

Flotr2 & envision support Android, iOS and new Blackberries, any modern browser with Canvas, and IE7+ with FlashCanvas / excanvas. I've seen it in IE6 too, but I do not test that browser.

[kberg]

Gridspy, what do you need that Dygraphs doesn't provide?

[ylem]

I used to use the original flot, but lately, we've been playing with jqplot. How do you feel this compares? I like the plug-in system in jqplot and recently we added 2D plots (heatmaps) in our local version.

[code4pay]

I'm currently working on a project to combine it with pivot.js. should make it a pretty good js only reporting solution

[petepete]

I'm currently using GnuPlot's HTML5 canvas terminal for the dashboard of a in-house app. It's worth considering if Flotr2/Google Visualisations don't quite fit the bill.

http://gnuplot.sourceforge.net/demo_canvas/

[kfk]

I can't test this on IE<9 right now, but comparing to flot it seems they added the option to put axis labels, which I think is a big deal. In flot you can do it, but you need a plugin.

Now if they add also a 3rd parameter to points (x,y and identifier) it will be amazing.

[Zaheer]

Awesome! I used Flotr for a personal project a while back.

Made a simple page with graph of common O-notations: https://students.ics.uci.edu/~zmohiudd/ONotationVisualizer.h...

[ChrisClark]

Neat, I used Flotr for a personal project a long time ago and really liked it. The author also helped me with a problem and implemented a feature I needed. I'll keep this around for any future uses.

[barfoomoo]

Is there any charting library which supports fetching data from server as the chart is horizontally scrolled? I want to chart some historical data that spans over years.

[cesutherland]

My other project envision.js handles this nicely. You can check out one example here: http://humblesoftware.com/envision/demos/ajax

The library is still young, and that functionality you see there will mature a bit yet.

[dgabriel]

A quick look at the documentation seems to indicate you could build that in.

[kordless]

The docs don't say much about stacking area charts, and when you add lines : { fill : true } to a line chart it seems to overlap the areas. Anyone know how to do it?

[jurre]

In normal flot theres a stacking add-on and you can add {stack: true} to your chart. Not sure if this works the same but I'd guess it's similar.

[mukaiji]

This is awesome!

I wasn't a big fan of color scheme initially (very powerpointy mind-you) but I looked at the source and saw the colors can be changed. Great work!!!

[serverascode]

Will definitely be checking this out as I need some charts to go with my bottle + elixir + bootstrap + datatables admin backend. :)

[wtracy]

How does it stack up against Google Charts?

[TwistedWeasel]

Last I looked most of the cooler Google charts were Flash based, which was a problem for me at the time as I was looking for something that works on iPad.

From what I can tell this is one of the better HTML5 chart libraries i've seen but in general these days I like to build stuff with d3 instead.

[amatix]

Interestingly, the Google Image Charts API is deprecated as of April... https://developers.google.com/chart/image/ - they're only focusing on the HTML5/SVG version.

[kyberias]

This page is a prime example of how one can break the browser's history (back-button). (Chrome)

[cesutherland]

Added back button support. Wasn't a bug, just was never implemented.

[ravejk]

Benefits over dygraphs? http://dygraphs.com/