FusionCharts - Dispose On Click

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

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>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<div id='container'>
    <div class='chartCont border-right' id='footfall-chart-container'>FusionCharts will load here.</div>On clicking this button the chart will dispose
    <input id='disposeFootfalls' class='resizebtn' type='Button' value='Dispose' />
</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();
    if (changeBtn.addEventListener) {
        changeBtn.addEventListener("click", disposeOnClick);
    } else {
        changeBtn.onclick && changeBtn.onclick(disposeOnClick);
    }
})