Tutorial :JavaScript Charting library - Google Analytics Style



Question:

I'm searching for a Javascript library to create line charts like the ones of Google Analytics. When the mouse is over a point, a box shows you the data.

An example is at http://wikirank.com/en

No Flash or Air, only JS and client-side Canvas...

Better if Free...


Solution:1

Edit: If you want a free library, try Flot.

Emprise Charts is a commercial library that I've seen featured on news sites.


Solution:2

Another option is to use Google's visualization APIs.It's pretty easy to use, and they have a several options for displaying data. One thing to keep in mind is some of the visualizations require you to send your data to their server, though none of the canvas/svg ones have this requirement.


Solution:3

There's JS-Charts which looks pretty awesome.

Or, if you fancy rolling your own you can create your own charting component using this library...


Solution:4

As an alternative to Flot, if you are using Prototype.js as JS framework, you can use Flotr.


Solution:5

Dojo also has something similar, though the example shown doesn't have similar functionalities but can be implemented to behave like the one you want,

http://dojocampus.org/explorer/#Dojox_Charting_2D_Lines,%20Markers,%20No%20Axes,%20Purple%20Theme,%20Custom%20Min%20Max


Solution:6

Raphael.js is pretty good at making graphs with svg/vml, you have to write some custom code though, but you can make some really nice animation with it, next to that it's compatible with ie6+ (only not with android 2 browsers).


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »