filtering line graph based on checkbox selection (ajax / spry)

[chumba]

Hello

 

 

 

I am using fusioncharts 3 evalution. If i can get this to work i intend to buy the full version.

 

 

 

My scenario is as follows,,,

 

 

 

My graphs display exam results for 10 students. There are 10 exams per students

 

(score on y-axis) (exam x-axis)

 

 

 

The graph shows a line for each student which goes up and down depending on the exam result.

 

 

 

Above the graph i would like to have checkboxes with each student name next to it. Based on which checkboxes are ticked i want this to update the graph. e.g. if select student A,B,C then only three lines will be displayed.

 

 

 

I am using adobe spry on my website to create the xml. I'd like to have something similar to this

 

http://labs.adobe.com/technologies/spry/samples/data_region/MultipleFiltersModeSample.html

 

 

 

but instead of updating a table, i'd like it to update the graph.

 

 

 

Any ideas. I can't find anything in the sample code, or by searching this forum. I'd really like to do this client=side instead of server=side.

 

 

 

TIA:)

Edited August 29, 2009 by Guest

[Guest Rajroop]

Hello,

Welcome to the FusionCharts Forum.

Yes, this is possible using FusionCharts. FusionCharts v3 offers tremendous integration capabilities with JavaScript. It seamlessly binds with JavaScript/AJAX to let you update charts on the client side, without invoking any page refreshes. All the charts in FusionCharts v3 suite support this functionality.

Could you please check the following link and see if the suits your needs?

http://www.fusioncharts.com/Demos/JS/Index.html

Kindly let us know if you need details on the make of this chart.

Looking forward to your rely.

[chumba]

Thank you Rajroop, that does exactly what I need.

 

 

 

Are there any tutorials for outputting the JS code using php?

[chumba]

Actually, it should be possible for me to figure it out using the example code from here:

 

http://www.fusioncharts.com/Docs/Contents/JS_Example.html

[Guest Rajroop]

Hello,

The example tutorial expalins in detail how to create a simple application to demonstrate the integration of FusionCharts and JavaScript.

However, please note that the code for this application is present in Download Package > Code > JavaScript > ClientSideData folder.

Happy FusionCharting.

[chumba]

I've spent hours trying to get this to work

 

 

 

would you mind checking the code for me?

 

 

 

I am trying to plot a MSline graph with selector buttons at the top.

test.txt

Edited September 3, 2009 by Guest

[FusionCharts Support]

Just going through this code...and found a silly mistake....see the text in bold...

 

 

 

<INPUT TYPE='Checkbox' name='KC Koshy' onClick...

 

 

 

this.document.productSelector.KC Koshy.checked==true

 

 

 

Can you figure out the space between KC and Koshy ?

 

 

 

Variables names can not have spaces ... its almost a generic programming Commandment.....

 

 

 

When I removed the spaces from these two and make them:

 

 

 

<INPUT TYPE='Checkbox' name='KCKoshy' onClick...

 

 

 

this.document.productSelector.K Koshy.checked==true

 

 

 

 

 

 

 

The code runs brilliantly with a line chart with 3 datasets.