9 ms·

Flotr2 : a library for drawing HTML5 charts and graphs

315 points by gourneau 14y ago

deleted 14y ago
[deleted]
ChrisClark 14y ago
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.
gourneau 14y ago
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/ http://jsfiddle.net/vN4C3/
kordless 14y ago
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 14y ago
  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.
BiWinning 14y ago
Benefits over Highcharts?
- kordless 14y ago
  It's free.
  - BiWinning 14y ago
    Do you have a paid subscription to Highcharts?
    - dkulchenko 14y ago
      Free as in freedom. Flotr2 is BSD-licensed, Highcharts is CC-BY-NC, with commercial licensing needed for anything beyond that.
zmmmmm 14y ago
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?).
- wamatt 14y ago
  Purdy! But yah that's a lot of bloat for eyecandy.
  - machrider 14y ago
    Realistically, a few static PNGs would exceed 100KB in a lot of cases. Any image-heavy page is going to have a few hundred KB of data. I wouldn't hold it against them.
- simonsarris 14y ago
  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?
  - gringomorcego 14y ago
    Well it only matters if it's going to get loaded a bazillion times. I mean, if you're focusing on something that's really good at a small domain, than I don't think you have anything to worry about. People keep optimizing crazily based on the assumption that it's going to be everywhere, which seems to be a bit overly optimistic.
  - zmmmmm 14y ago
    > Oh dear. 100kb is bad for this sort of thing? Does anyone know if that's a commonly held view? Not at all. For what you are actually getting 100kb is awesome. However I like to develop really light pages especially for mobile. It's not even all about download size, mobile browsers can bog down even just parsing and keeping JS in memory.
wtracy 14y ago
How does it stack up against Google Charts?
- TwistedWeasel 14y ago
  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.
  - dudus 14y ago
    The only chart that was flash based were the map charts. They were redone and now it's svg. https://developers.google.com/chart/interactive/docs/gallery/geochart#Configuration_Options https://developers.google.com/chart/interactive/docs/gallery...
  - dudus 14y ago
    Some time ago I used both Flot and Google Charts to build a dashboard. Each of them have it's own strengths. I believe that flotr2 is not so different than flot to what I've seen. By the time I was woking on this project Google Charts was fragmented into 2 different libraries, Google Image charts and Google Visualization API. My project was to draw a dashboard with multiple charts and connect them to data sources that collected the charts data on the backend. So every time you loaded the dashboard it fired multiple AJAX calls one for each chart's data. Flot was very easy to work with, the interface to load data is simple and makes sense. It offered good options to customize charts. It offered Mixed charts where you could have lines and bars on the same chart. That was the only reason I brought flot to the mix, there was no way to draw charts using bars and lines on Google Charts back then. Google Charts on the other hand was a little bit harder to work with. The interface to input data is less obvious and has some strange decisions. Important to notice that Google Charts also defines a protocol to load data into charts, the protocol was called "wire protocol" back then but was renamed to "Chart Tools Datasource Protocol"[1] currently on version 0.6. Sometimes the chart design was inconsistent and that was apparent when you had a bunch of different chart types on the same page. The Geo charts also had a weird behavior, different from most other charts, possibly because they were rendered using flash. The protocol Google establishes for chart data is hard to get started but once you integrate with it is very easy to change the visualization and creates good structure. Google Charts got a big update a couple weeks ago, the previous version are being deprecated and all charts are now rendered using HTML5 techniques, most of the time SVG. The protocol also got a big update and fixed a lot of bugs that made my life somewhat miserable weeks ago. Now it also supports mixed charts (bars and lines), so I don't need flot anymore. I'm in the process of creating another dashboard now, and I've been using Google Charts only this time. My advice is that if you're planning to draw only a couple of charts and flotr2 does the work go with it. It's easier to work with and lighter. If you're building something that depends on charts a lot go with Google Charts. The protocol will come handy and it has some helpers to connect to backend data sources and Google Spreadsheets built-in. If you need to create a product that relies on the charting library too much you probably want to support more than one charting library and possibly have the option to switch the library on the fly. The deprecation of the previous Charting library. The deprecation policy for Google Charts may be a little frightening[2]. [1] https://developers.google.com/chart/interactive/docs/dev/implementing_data_source https://developers.google.com/chart/interactive/docs/dev/imp... [2] https://developers.google.com/chart/terms https://developers.google.com/chart/terms
mey 14y ago
Is this suitable for realtime streams of data? Looking for something easier to work with then d3.js/cubism.js.
- TwistedWeasel 14y ago
  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/ http://frasergraham.github.com/live_stats.js/
  - liamk 14y ago
    Can it also be used with socket.io? I'm working on a real-time app and I'm using socket.io to transport the data and graphing it on canvas. I'd be happy to use a graphing library that 1) looks good, and 2) works with real-time data, instead of my custom solution.
    - TwistedWeasel 14y ago
      I looked into it briefly, right now i'm more focused on getting the charts right. Once I've done that I was going to work on different data transport options.
- karmi 14y ago
  Cubism is pretty easy to work with, or? See my heavily annotated sketch of continuous polling with Cubism; http://bl.ocks.org/2689616 http://bl.ocks.org/2689616
  - mey 14y ago
    Could be me, could be the docs, but I was having trouble groking how to wire up non-graphite/node.js connection.
- cesutherland 14y ago
  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 http://humblesoftware.com/envision/demos/realtime. Envision here is adapted to Flotr2, but working with it is higher level than working with Flotr2 directly.
Swizec 14y ago
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 14y ago
  Stick to something (like d3js,) it's what I've decided to do.
mukaiji 14y ago
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!!!
xxiao 14y ago
does it have anything to do with flot which is a jquery charting plugin?
- degobah 14y ago
  I looked into this, and apparently flotr2 is forked from flotr. flotr was "inspired by" flot, but uses Prototype instead of jQuery. Note that flotr2 removed the Prototype dependency so: flot: the original uses jQuery flotr: inspired by flot uses Prototype flotr2: branch of flotr no dependency
Zaheer 14y ago
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.html https://students.ics.uci.edu/~zmohiudd/ONotationVisualizer.h...
ylem 14y ago
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.
ravejk 14y ago
Benefits over dygraphs? http://dygraphs.com/ http://dygraphs.com/
gridspy 14y ago
Wow! Looks great for Gridspy ( see http://your.gridspy.co.nz/demo/ 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 14y ago
  Thanks for the feedback. Please check out another project of mine, Envision.js: http://humblesoftware.com/envision/ 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 14y ago
  Gridspy, what do you need that Dygraphs doesn't provide?
  - gridspy 14y ago
    Bar Graphs. Animations. Performance while adding data live. A streamlined API.
mbell 14y ago
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 14y ago
  Demos definitely need work! Edit: back button should be ok now.
  - cpsaltis 14y ago
    I had problems with these too, better check them again
barfoomoo 14y ago
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.
- dgabriel 14y ago
  A quick look at the documentation seems to indicate you could build that in.
- cesutherland 14y ago
  My other project envision.js handles this nicely. You can check out one example here: http://humblesoftware.com/envision/demos/ajax http://humblesoftware.com/envision/demos/ajax The library is still young, and that functionality you see there will mature a bit yet.
kfk 14y ago
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.
code4pay 14y ago
I'm currently working on a project to combine it with pivot.js. should make it a pretty good js only reporting solution
kyberias 14y ago
This page is a prime example of how one can break the browser's history (back-button). (Chrome)
- cesutherland 14y ago
  Added back button support. Wasn't a bug, just was never implemented.
petepete 14y ago
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/ http://gnuplot.sourceforge.net/demo_canvas/
antihero 14y ago
Could this be modified to output SVG perchance?
serverascode 14y ago
Will definitely be checking this out as I need some charts to go with my bottle + elixir + bootstrap + datatables admin backend. :)
epynonymous 14y ago
would be nice to have some tooltips.
photon137 14y ago
differences between this and jqPlot? (http://www.jqplot.com/index.php http://www.jqplot.com/index.php)

315 points by gourneau 14y ago

deleted 14y ago

[deleted]

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.

gourneau 14y ago

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/ http://jsfiddle.net/vN4C3/

kordless 14y ago

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 14y ago
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.

BiWinning 14y ago

Benefits over Highcharts?

kordless 14y ago
It's free.
- BiWinning 14y ago
  Do you have a paid subscription to Highcharts?
  - dkulchenko 14y ago
    Free as in freedom. Flotr2 is BSD-licensed, Highcharts is CC-BY-NC, with commercial licensing needed for anything beyond that.

zmmmmm 14y ago

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?).

wamatt 14y ago
Purdy! But yah that's a lot of bloat for eyecandy.
- machrider 14y ago
  Realistically, a few static PNGs would exceed 100KB in a lot of cases. Any image-heavy page is going to have a few hundred KB of data. I wouldn't hold it against them.
simonsarris 14y ago
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?
- gringomorcego 14y ago
  Well it only matters if it's going to get loaded a bazillion times. I mean, if you're focusing on something that's really good at a small domain, than I don't think you have anything to worry about. People keep optimizing crazily based on the assumption that it's going to be everywhere, which seems to be a bit overly optimistic.
- zmmmmm 14y ago
  > Oh dear. 100kb is bad for this sort of thing? Does anyone know if that's a commonly held view? Not at all. For what you are actually getting 100kb is awesome. However I like to develop really light pages especially for mobile. It's not even all about download size, mobile browsers can bog down even just parsing and keeping JS in memory.

wtracy 14y ago

How does it stack up against Google Charts?

TwistedWeasel 14y ago
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.
- dudus 14y ago
  The only chart that was flash based were the map charts. They were redone and now it's svg. https://developers.google.com/chart/interactive/docs/gallery/geochart#Configuration_Options https://developers.google.com/chart/interactive/docs/gallery...
- dudus 14y ago
  Some time ago I used both Flot and Google Charts to build a dashboard. Each of them have it's own strengths. I believe that flotr2 is not so different than flot to what I've seen. By the time I was woking on this project Google Charts was fragmented into 2 different libraries, Google Image charts and Google Visualization API. My project was to draw a dashboard with multiple charts and connect them to data sources that collected the charts data on the backend. So every time you loaded the dashboard it fired multiple AJAX calls one for each chart's data. Flot was very easy to work with, the interface to load data is simple and makes sense. It offered good options to customize charts. It offered Mixed charts where you could have lines and bars on the same chart. That was the only reason I brought flot to the mix, there was no way to draw charts using bars and lines on Google Charts back then. Google Charts on the other hand was a little bit harder to work with. The interface to input data is less obvious and has some strange decisions. Important to notice that Google Charts also defines a protocol to load data into charts, the protocol was called "wire protocol" back then but was renamed to "Chart Tools Datasource Protocol"[1] currently on version 0.6. Sometimes the chart design was inconsistent and that was apparent when you had a bunch of different chart types on the same page. The Geo charts also had a weird behavior, different from most other charts, possibly because they were rendered using flash. The protocol Google establishes for chart data is hard to get started but once you integrate with it is very easy to change the visualization and creates good structure. Google Charts got a big update a couple weeks ago, the previous version are being deprecated and all charts are now rendered using HTML5 techniques, most of the time SVG. The protocol also got a big update and fixed a lot of bugs that made my life somewhat miserable weeks ago. Now it also supports mixed charts (bars and lines), so I don't need flot anymore. I'm in the process of creating another dashboard now, and I've been using Google Charts only this time. My advice is that if you're planning to draw only a couple of charts and flotr2 does the work go with it. It's easier to work with and lighter. If you're building something that depends on charts a lot go with Google Charts. The protocol will come handy and it has some helpers to connect to backend data sources and Google Spreadsheets built-in. If you need to create a product that relies on the charting library too much you probably want to support more than one charting library and possibly have the option to switch the library on the fly. The deprecation of the previous Charting library. The deprecation policy for Google Charts may be a little frightening[2]. [1] https://developers.google.com/chart/interactive/docs/dev/implementing_data_source https://developers.google.com/chart/interactive/docs/dev/imp... [2] https://developers.google.com/chart/terms https://developers.google.com/chart/terms

mey 14y ago

Is this suitable for realtime streams of data? Looking for something easier to work with then d3.js/cubism.js.

TwistedWeasel 14y ago
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/ http://frasergraham.github.com/live_stats.js/
- liamk 14y ago
  Can it also be used with socket.io? I'm working on a real-time app and I'm using socket.io to transport the data and graphing it on canvas. I'd be happy to use a graphing library that 1) looks good, and 2) works with real-time data, instead of my custom solution.
  - TwistedWeasel 14y ago
    I looked into it briefly, right now i'm more focused on getting the charts right. Once I've done that I was going to work on different data transport options.
karmi 14y ago
Cubism is pretty easy to work with, or? See my heavily annotated sketch of continuous polling with Cubism; http://bl.ocks.org/2689616 http://bl.ocks.org/2689616
- mey 14y ago
  Could be me, could be the docs, but I was having trouble groking how to wire up non-graphite/node.js connection.
cesutherland 14y ago
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 http://humblesoftware.com/envision/demos/realtime. Envision here is adapted to Flotr2, but working with it is higher level than working with Flotr2 directly.

Swizec 14y ago

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 14y ago
Stick to something (like d3js,) it's what I've decided to do.

mukaiji 14y ago

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!!!

xxiao 14y ago

does it have anything to do with flot which is a jquery charting plugin?

degobah 14y ago
I looked into this, and apparently flotr2 is forked from flotr. flotr was "inspired by" flot, but uses Prototype instead of jQuery. Note that flotr2 removed the Prototype dependency so: flot: the original uses jQuery flotr: inspired by flot uses Prototype flotr2: branch of flotr no dependency

Zaheer 14y ago

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.html https://students.ics.uci.edu/~zmohiudd/ONotationVisualizer.h...

ylem 14y ago

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.

ravejk 14y ago

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

gridspy 14y ago

Wow! Looks great for Gridspy ( see http://your.gridspy.co.nz/demo/ 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 14y ago
Thanks for the feedback. Please check out another project of mine, Envision.js: http://humblesoftware.com/envision/ 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 14y ago
Gridspy, what do you need that Dygraphs doesn't provide?
- gridspy 14y ago
  Bar Graphs. Animations. Performance while adding data live. A streamlined API.

mbell 14y ago

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 14y ago
Demos definitely need work! Edit: back button should be ok now.
- cpsaltis 14y ago
  I had problems with these too, better check them again

barfoomoo 14y ago

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.

dgabriel 14y ago
A quick look at the documentation seems to indicate you could build that in.
cesutherland 14y ago
My other project envision.js handles this nicely. You can check out one example here: http://humblesoftware.com/envision/demos/ajax http://humblesoftware.com/envision/demos/ajax The library is still young, and that functionality you see there will mature a bit yet.

kfk 14y ago

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.

code4pay 14y ago

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

kyberias 14y ago

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

cesutherland 14y ago
Added back button support. Wasn't a bug, just was never implemented.

petepete 14y ago

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/ http://gnuplot.sourceforge.net/demo_canvas/

antihero 14y ago

Could this be modified to output SVG perchance?

serverascode 14y ago

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

epynonymous 14y ago

would be nice to have some tooltips.

photon137 14y ago

differences between this and jqPlot? (http://www.jqplot.com/index.php http://www.jqplot.com/index.php)