Graphic libs comparison

Goal was visualization of time series with mouseover line detection



Pixi Plexx Two
Technology: WebGL with Canvas Fallback Svg, Canvas, and WebGL Svg, Canvas, and WebGL
License: MIT License MIT License
jQuery needed: No No Yes
Mouseevents/Hittest: Yes Yes No
Usage: easy easy easy
Summary:
  • Individual setting of a hitarea for object
  • Canvas Fallback
  • Text support
  • First impression, easy to draw lines
  • Mouse events supported, but not good to use for dynamic drawing
  • Supports all technologies
  • Supports all technologies
  • No support for text and images
  • No official mouse events
  • Remebers objects because two is based on scenegraph
Grade: 1-2 2 2-3
Website: http://www.pixijs.com/ https://jonobr1.github.io/two.js/
Example: pixi.js plexx.js two.js


Chart libs comparison

Goal was visualization of time series with dynamic axis labels and tool top



Flotr2 Flot D3 Highcharts Jqplot Chartist Nvd3
Technology: Canvas Only Canvas Only SVG SVG Canvas Only SVG SVG
License: MIT License MIT License BSD License CC by-nc 3.0 MIT, GPL v2 DWTFYWTPL* Apache 2.0
jQuery needed: No Yes Yes Yes No Yes Yes
Axis labels/ticks: supported supported supported supported supported supported supported
Zoom: supported supported not supported supported supported not supported supported
Save image: supported for JPG, PNG not supported not supported export modul for image export not supported not supported not supported
Usage: easy easy easy easy medium medium medium
Summary:
  • Good canvas lib
  • Many useful functions in the core like zoom, axis labels, save image
  • Easy to combine with custome code
  • Easy Setup
  • Much functionality in core
  • jQuery is needed
  • SVG only
  • Hard to implement good working time axes
  • Easy to use and a huge mass of examples
  • SVG advantage is of course that it is easy to implement interaction functions
  • Using of path element faster then line, but no simple way for circles at path
  • really easy to use
  • only svg, jquery needed
  • good documentation
  • had a good feeling when using it
  • Nice zoom function
  • Sometimes chart draw doing strange stuff, dont know why
  • jQuery is needed
  • Styling via stylesheet, no working option for line color
  • axes work fine and easy to adapte
  • limited features
  • responive charts
  • SVG only
  • depends on d3
  • Datetime for axes does not work fine
  • Setup could be easier
  • Zoom with dynamic data reload does not work fine
Grade: 2 2 2-3 2-3 3 3 3-4
Website: http://humblesoftware.com/flotr2/ http://www.flotcharts.org/ http://d3js.org/ http://www.highcharts.com/ http://www.jqplot.com/ https://gionkunz.github.io/chartist-js/ http://nvd3.org/
Example: Flotr2 Flot d3 highcharts Jqplot chartist nvd3


Detailed comparisons:

http://socialcompare.com/en/comparison/javascript-graphs-and-charts-libraries
https://codegeekz.com/javascript-chart-and-graph-libraries/

* Do what the fuck you want to public lisence


Some other Chart Libs:

http://phenxdesign.net/flotr/examples/prototype/
http://www.flotcharts.org/
http://visjs.org/examples/graph2d/15_streaming_data.html
http://pixi.mobilabs.fr/docs.html#linedt


Time series libs comparison:

Goal was visualization of time series with dynamic axis labels



Dygraphs Epoch Rickshaw Envision
Technology: Canvas Only Canvas Only SVG Canvas Only
License: MIT License Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License MIT License Apache Public License 2.0
jQuery needed: No No Yes No
Axis labels/ticks: supported supported supported - but usage is complicated supported
Zoom: supported supported supported supported
Save image:

no official support

some user extentions

not supported not supported not supported
Usage: easy medium hard easy
Summary:
  • Highly customizable
  • unusual region highlighted
  • Zoom, pan, and mouseover in the core
  • Good for large amount of data, but data structure could be better
  • Also easy to combine with custome code
  • Nice smooth rendering of the chart
  • Only less functions in core
  • Styling with stylesheet, based on d3
  • Think it is not ready yet to use it for more complex systems
  • No useful way for hiding single time series
  • Usage to complicated
  • It looks like some parts dont work like they should
  • Not recommended
  • Looks like the lib is out of date
  • Examples are looking interesting, but after an hour of trying with no result, i stopped
Grade: 2 3 5 5
Website: http://dygraphs.com/ http://fastly.github.io/epoch/ http://code.shutterstock.com/rickshaw/examples/ http://www.humblesoftware.com/envision/
Example: Dygraphs Epoch Rickshaw Envision