Show'hide Columns When Div Is Resized?

[jerryd]

I'm using FusionCharts via HTML files (sent from a custom web server I'm building in Delphi) along with Javascript / XML (AJAX) using XMLHttpRequest - essentially all raw code, no third-party libraries. I'm trying to figure out how to properly show / hide columns in a chart when its parent div has been resized.

 

I will have an animation to expand a small column chart to fill the page. The small view will have just 10 columns, but the large view will have up to 50 columns. I need to figure out how to make these columns show one by one, as the div is "sliding" open, and hide them one by one when it's "sliding" closed. With my current setup, I'm just assigning the filename of the XML.

 

I believe this will consist of sending ALL the possible data for the 50 columns, storing it temporarily in some list, and reading/assigning the raw XML data to the charts instead of the filename (which my web server handles the XML requests with dynamic data and not files anyway). However I'm not too familiar with HTML and especially javascript, and I'm sure there must already be a solution for this.

 

Thanks for any help.

[Guest Sumedh]

Hi,

 

You can add animation for the data plots.

 

Animations can be applied using FusionCharts Styles. You would need to set the x and y values and other parameters for the customized animation.

 

For more information, refer this:http://docs.fusionch.../Animation.html

 

If you are trying to update the chart in the same div, first of all you would need to call dispose() method to clear the buffer.

 

Then, you would need to call updateChart() method on the chart id.

 

Ref. Code:

 

function updateChart(domId){

if (chartLoaded){

//Get reference to chart object using Dom ID

var chartObj = getChartFromId(domId);

chartObj.setXMLData(your XML data);

}

}

 

For more information, refer this:http://docs.fusionch...ChangeData.html

 

Hope this helps.