Time for action — change chart data on the click of a button
We create a button to replace the chart's data with that of another department.
1. Create a copy of
AdvancedEvents.html
in theJavaScriptCapabilities
folder and name it asDynamicDataUpdate.html
.2. Open this new file in a text editor and replace the text
Chart controls will appear here
(on line number 30) with the following HTML:<p> <input type="button" onclick="updateData()" value="Show data of "cosmetics" department" /> </p>
3. Now, near the beginning of the page, look for the line of code (around line number 22)
myChart.addEventListener("rendered", showChartControls)
, and on the next line of it add a new line and insert the following snippet of code:function updateData () { var chart = FusionCharts("myChartId"); chart.setXMLUrl("WeeklyCosmeticsSale.xml"); }
4. Create a new XML file in this folder with the name
WeeklyCosmeticsSale.xml
and type the following data in it:<chart caption='Harry...