CODEWITHSUNDEEP

javascriptcharts

Reputation: 835

Javascript library for clickable bar chart?

I need a Javascript charting tool to build a bar chart that allows me to click on a chart bar and get another chart (in a popup or below the first chart). What I need is a bar chart that fires an event giving me some kind of id of the column that has been clicked.

Dettails

The data for the first chart should be loaded with ajax when the page loads and the data for the second chart should be loaded when you click on one of the columns.

an example: A graph with one bar for March and one bar for April, when you click on the March bar you get a second graph (below or in a pop up) with two bars: one for the 12/03/2011 and the other for the 23/03/2011.

Total expenses: March 1200 April 300

Total expenses for March: 12/03/2011 1000 23/03/2011 200

Total expenses for April: 16/04/2011 10 21/04/2011 290

Upvotes: 4

Views: 5796

Answers (6)

Synchro

Reputation: 37810

Flotr2 is a substantially enhanced fork of Flot.

Upvotes: 0

Reputation: 221210

D3.js is very impressive and renders beautiful charts. Check out their many nice examples on the website:

enter image description here

It is free and ships with a BSD license

Upvotes: 2

Reputation: 359986

Yet another option, if you are already using jQuery: Flot.

Graph Types:

Interaction:

Click the images to see the actual demo.

Upvotes: 5

Reputation: 3136

Checkout http://www.jqplot.com/

It doesn't do all that you need out of the box, but if you extend the Cursor class I think you can get the functionality you've been looking for.

http://www.jqplot.com/docs/files/plugins/jqplot-cursor-js.html#$.jqplot.Cursor

Upvotes: 1

Reputation: 156622

Highcharts allows custom "click" handlers for individual points or entire series.

Upvotes: 2

Reputation: 111486

See gRaphaël - scalable vector charts that work in Firefox, Safari, Chrome, Opera and even Internet Explorer 6+.

Upvotes: 1

Related Questions