FusionCharts - Load Data External URL - dataLoadCancelled event

Created using FusionCharts Suite XT - www.fusioncharts.com

by Siva Subramaniam

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows how to use dataLoadCancelled event when the data is loaded from an external URL-->
<div id="chart-container">FusionCharts will render here</div>
<div>
    <div id="indicatorDiv">Event name: <b> dataLoadCancelled </b> 
        <br>
        <p>When the default action of dataLoadRequested event is cancelled using eventObject.preventDefault(), this event is raised. Subsequently, the associated AJAX requests are aborted.</p>
        <p>The following details can be obtained from the argObj parameter of the event when the data is loaded from the URL</p>
        </br>
    </div>
    <div>
        <div id="header">
            <div class="parameter-name">Parameter Name</div>
            <div class="parameter-value">Parameter Value</div>
        </div>
        <div id="attrs-table"></div>
    </div>
</div>

CSS

#header {
    display: none;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 14px;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
}
#attrs-table {
    text-align: center;
    width: 500px;
}
.parameter-name, .parameter-value {
    width: 250px;
    font-weight: bold;
    text-align: center;
    float: left;
}
.title, .value {
    float:left;
    width: 230px;
    height: 20px;
    background: #fff;
    padding: 5px 10px;
}
.title {
    clear: left;
}
.title:nth-child(4n+1), .value:nth-child(4n+2) {
    background: rgb(0, 117, 194);
    color: #fff;
}
.value {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

FusionCharts.ready(function () {
    var ageGroupChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '450',
        height: '250',
        dataFormat: 'jsonurl',
        dataSource: 'http://static.fusioncharts.com/fiddle/getSampleJSON.php',
            "events": {
                "dataLoadRequested": function(evtObj, argObj) {
                    console.log(evtObj);
                    evtObj.cancelled = true;
                   evtObj.preventDefault();
                    evtObj.stopPropagation();
                },
            /**
             * @description
             * When the default action of dataLoadRequested event is cancelled using eventObject.preventDefault(), this event is raised. Subsequently, the associated AJAX requests are aborted.
             *
             * @param {Object} evt: An object containing all the details related to this event like eventId, sender (the chart object itself), etc.
             * @param {Object} data: An object containing all the details related to the data being loaded like data format, url, actual data, etc.
             */
                "dataLoadCancelled": function (evtObj, argObj) {
                var header = document.getElementById('header');
                header.style.display = 'block';

                var tempDiv = document.createElement('div');
                var attrsTable = document.getElementById('attrs-table');
                var titleDiv, valueDiv;
                // Iterating through all the properties in argObj and adding it to the DOM
                for (var prop in argObj) {
                    titleDiv = document.createElement('div');
                    titleDiv.className = 'title';
                    titleDiv.innerHTML = prop;

                    valueDiv = document.createElement('div');
                    valueDiv.className = 'value';
                    valueDiv.innerHTML = argObj[prop];

                   ...