FusionCharts - Update Chart Data Runtime - dataUpdated API Call

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fusion.js"></script>
<!-- This sample shows the event parameters, and their values, when dataUpdated event is triggered-->
<div id="indicatorDiv">Event name: <strong> dataUpdated </strong> 
    
   <p>Triggered when chart data is updated and the chart is redrawn, after the drawComplete event is triggered.</p>
   <p>All events, when triggered, will provide two parameters for the handler - <strong> eventObj </strong> (object containing information generic to all events) and <strong> dataObj </strong> (object containing information specific to an event).</p>
   <p>The dataUpdated event is triggered when the chart initially loads as well as on subsequent data updates. Click the <strong> Update Chart Data </strong> button to trigger the dataUpdated event.</p>
   <p>Scroll down to the table rendered below the chart to view information contained in the dataObj object. To view information contained in the eventObj object, open the console. (You can also view the eventObj and dataObj information when the chart first loads).</p>
</div>
<div id="chart-container">FusionCharts will render here</div>
<button id="update-chart">Update Chart Data</button>
<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

body {
    padding: 5px;
    margin: 0 auto;
}

strong {
  font-weight: bold;
}

#chart-container {
  margin: 10px 0;
} 
#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: #5d62b5;
    color: #fff;
}
.value {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

FusionCharts.ready(function () {
    var chartConfiguration = {
        "caption": "Sales of Liquor",
            "subCaption": "Last week",
            "xAxisName": "Day",
            "yAxisName": "Sales (In USD)",
            "numberPrefix": "$",
            "showValues": "1",
            "theme": "fusion"
    };
    var updateBtn = document.getElementById('update-chart');
    // Event Listener for the update-chart button. Updating the chart with another random set of data. In real life use cases, this could be a different set of data like data for current week..etc
    updateBtn.addEventListener('click', function (e) {
        this.disabled = true;
        salesChart.setJSONData({
            chart: chartConfiguration,
            data: [{
                "label": "Mon",
                    "value": "3521"
            }, {
                "label": "Tue",
                    "value": "2364"
            }, {
                "label": "Wed",
                    "value": "3412"
            }, {
                "label": "Thu",
                    "value": "4823"
            }, {
                "label": "Fri",
                    "value": "3487"
            }, {
                "label": "Sat",
                    "value": "5402"
            }, {
                "label": "Sun",
                    "value": "4582"
            }]
        });
    });
    var salesChart = new FusionCharts({
        type: 'area2d',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": chartConfiguration,

                "data": [{
                "label": "Mon",
                    "value": "4123"
            }, {
                "label": "Tue",
                    "value": "4633"
            }, {
                "label": "Wed",
                    "value": "5507"
            }, {
                "label": "Thu",
                    "value": "4910"
            }, {
                "label":...