FusionCharts - Dispose with timer and re-render
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id='container'>
<div class='chartCont border-right' id='footfall-chart-container'>FusionCharts will load here.</div>This Chart will dispose after 5 seconds of render and will appear again with modified data.</div>
JavaScript
FusionCharts.ready(function () {
var changeBtn = document.getElementById('disposeFootfalls');
var disposeOnClick = function () {
FusionCharts("dailyFootfalls").dispose();
alert("The chart has disposed");
};
var dailyFootfallChart = new FusionCharts({
type: 'column2d',
renderAt: 'footfall-chart-container',
width: '550',
height: '300',
dataFormat: 'json',
id: 'dailyFootfalls',
dataSource: {
"chart": {
"caption": "Daily Footfalls",
"subcaption": "Last 3 weeks",
"xaxisname": "Date",
"yaxisname": "No. of Footfalls",
"showvalues": "0",
"theme": "fint"
},
"data": [{
"label": "14 May",
"value": "2154"
}, {
"label": "15 May",
"value": "1742"
}, {
"label": "16 May",
"value": "1845"
}, {
"label": "17 May",
"value": "2490"
}, {
"label": "18 May",
"value": "1975"
}, {
"label": "19 May",
"value": "1840"
}, {
"label": "20 May",
"value": "2054"
}, {
"label": "21 May",
"value": "2153"
}]
}
}).render();
setTimeout(function () {
FusionCharts("dailyFootfalls").duration();
}, 5000);
FusionCharts.addEventListener("duration", function (eventObject) {
alert("Chart has been disposed.New chart will appear now");
var truncateddDailyFootfallChart = new FusionCharts({
type: 'column2d',
renderAt: 'footfall-chart-container',
width: '550',
height: '300',
dataFormat:...