Tutorial :JavaScript Charting library - Google Analytics Style


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


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

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


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.


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


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


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,



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
Next Post »