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?

Google will let you use theirs: http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html — Michael Greene, Apr 29 '11 at 16:22

score 12 · Accepted Answer · answered Apr 29 '11 at 16:52

12

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 :)

answered Apr 29 '11 at 16:52

Jai

3,549
3
23
31

Thanks for flot. Please advice MIT Licence is free of charge in commercial? – Johnny_D Oct 30 '12 at 21:11
@Johnny_D Yeah, you can use [MIT licence](http://opensource.org/licenses/mit-license.html) for commercial stuff. – hexicle Aug 24 '13 at 16:58

score 4 · Answer 2 · answered Apr 29 '11 at 16:22

4

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

answered Apr 29 '11 at 16:22

Wyatt Barnett

15,573
3
34
53

mg1075 · Answer 3 · 2013-04-24T17:40:48.080

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

edited Apr 24 '13 at 17:40

answered Apr 24 '13 at 16:47

mg1075

17,985
8
59
100

I would like to add that envision.js is free with MIT license. – Penghe Geng Feb 17 '15 at 16:20

score 2 · Answer 4 · answered Mar 16 '13 at 10:17

2

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

answered Mar 16 '13 at 10:17

Kamal Reddy

2,610
5
28
36

score 1 · Answer 5 · answered Jan 17 '13 at 09:34

1

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

answered Jan 17 '13 at 09:34

Anoop Ambalapuzha

15
1
7

fvu · Answer 6 · 2013-04-24T15:44:14.930

1

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.

edited Apr 24 '13 at 15:44

answered Apr 29 '11 at 16:35

fvu

32,488
6
61
79

amcharts is comprehensive and supports many chart types. However, for the stockchart, I found the chart content doesn't immediately update when I am dragging the mouse to change the display period. It only updates after I release the mouse. This function is present in most other alternatives. – Penghe Geng Feb 17 '15 at 16:23

score 0 · Answer 7 · answered Apr 29 '11 at 16:51

0

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

answered Apr 29 '11 at 16:51

Nithin

139
2
9

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

7 Answers7