jesterbear

Showing/Hiding parts of a line chart with Javascript and checkboxes

Recommended Posts

I have a multi series line chart that can have 10 to 20 sets of data.

 

 

 

Are there any examples out there of how to use javascript and some checkboxes to change the display of the lines? I want to make it so that if the user wants to see only 3 of the 15 lines, they could uncheck the 12 that they do not want to see, and toggle their view.

 

 

 

Is this possible?

 

 

 

Thanks

Share this post


Link to post
Share on other sites

Hi,

Could you please visit online demo section and download the sample?

FusionCharts + JavaScript (AJAX) Integration
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.

http://www.fusioncharts.com/Downloads/Demos/FusionChartsJS.zip

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

Share this post


Link to post
Share on other sites

Thanks for the link.

 

 

 

One problem with the chart in the example, is that the colors are not consistent. When you first hit that link, you see that Product A is blue. After you uncheck Product A, Prodcut B turns blue. Certainly this is not a good way to be consistent with the presentation of the data.

 

 

 

I noticed in the javascript, that there is a function called getProductXML(). It defines what goes into the dataset tag of the xml. Here is where I would normally define the color like so ...

 

 

 

dataset seriesName='West Coast' color='D56658'

 

 

 

How can the color value be added to the array so that it can be assigned to the correct series?

 

 

 

I am not a programmer, and I would greatly appreciate your help.

 

 

 

Thanks.

Edited by Guest

Share this post


Link to post
Share on other sites

Thank you Arindam for the very helpful links. Is there a way to save a chart using that program? Or isolate that chart from the other yet still allowing for an easy update of them all?

 

 

 

For instance, if I have a message board with a Male celebrities category and I have 3 boards in it. Brad Pitt, George Clooney and Harrison Ford for example. And I wanted to post a chart of the posts counts from those boards over time (per month) into one chart but also be able to isolate one actor's counts and post it into their own board to see their progress? I can see where this Java supported version of FusionCharts would display this for me, but am I able to save one category of data's (say for example Brad Pitt's) trend only and post it somewhere else? Then, when I change the one main data set, it will carry over to the Brad Pitt board without me having to update every single chart?

 

 

 

Does that make sense? :)

Share this post


Link to post
Share on other sites

Can be done...

 

 

 

 

 

* FusionCharts does not store data...it takes data from a data source which can be changed/built/re-built (separaetely) dynamically/manually/when asked-for etc. as per needed, as per Business Logic/implementation/requirements...

 

 

 

store you data in database, and update as per needed and let another code query it to fetch the latest data from the database, (build XML) and send it over to the chart to display the latest trend etc.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now