How to create a dynamic line graph like Google Finance has?

Question

I'm looking to create a dynamic zoomable line graph for a web page I'm doing.

I was told to "make it like Google's one" (though by a sales guy who in turn is parroting the client, so he's aiming high. They'll all come right back down to earth once I tell him how much it'll cost!)

Can somebody recommend where to start with this? Are there any available jQuery plugins out there? Or other means of producing something similar?

Answer 1

You can try google charting APIs like Wyatt noted, however, do keep in mind that google pulls data to its severs, and if your client has any privacy hassles, maybe thats not the solution to go for.

I would recommend these - jqPlot - Good looks, MIT / GPL licence, interactive, http://www.jqplot.com/

flot - Good looks, Open source, interactive, http://code.google.com/p/flot/

Highcharts - Multiple licenses (might have to pay) http://www.highcharts.com/

Lots of other options, but these are all javascript based :)

Answer 2

You can use the same toys google is using for starters.

Answer 3

Humble Software's envision.js also looks promising if you need to display time-series or stock charts.

http://www.humblesoftware.com/envision

finance/stock chart demo:
http://www.humblesoftware.com/envision/demos/finance

Answer 4

I would suggest dygraphs. This one was developed intending to replicate google charts. It also has the range selector just like the google charts.

Answer 5

Based on my experience I hope this is better http://www.jqplot.com/

Answer 6

I like Amcharts' Stockchart, however it's a Flash based chart. But it's very solid, easy to implement and it works well with large datasets.

Their regular Linechart product is much cheaper and also has a pretty intuitive but less attractive zoom-scroll facility,.

EDIT: as pointed out by user mg1075, amcharts is now available as a Javascript chart.

Answer 7

I've used and like the flot library. easy to use and easy to get started. plus its based on jQuery.