FusionCharts API-Event: dataUpdateCancelled

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/fusioncharts.charts.js"></script>
<!-- This sample shows the event parameters, and their values, when dataUpdateCancelled event is triggered-->
<div id="indicatorDiv">Event name: <strong> dataUpdateCancelled </strong> 
    
    <p>Triggered when the default behavior of the beforeDataUpdate event is cancelled by calling the eventObj.preventDefault() method.</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>Click the <strong> Update Chart Data </strong> button to trigger the dataUpdateCancelled 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.</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: rgb(0, 117, 194);
    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": "$",
            "paletteColors": "#0075c2",
            "bgColor": "#ffffff",
            "showBorder": "0",
            "showCanvasBorder": "0",
            "plotBorderAlpha": "10",
            "usePlotGradientColor": "0",
            "plotFillAlpha": "50",
            "showXAxisLine": "1",
            "axisLineAlpha": "25",
            "divLineAlpha": "10",
            "showValues": "1",
            "showAlternateHGridColor": "0",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "subcaptionFontBold": "0",
            "toolTipColor": "#ffffff",
            "toolTipBorderThickness": "0",
            "toolTipBgColor": "#000000",
            "toolTipBgAlpha": "80",
            "toolTipBorderRadius": "2",
            "toolTipPadding": "5"
    };
    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;
        // Try to update the chart without giving the actual data. This will be caught in the beforeDataUpdate event
        salesChart.setJSONData({
            chart: chartConfiguration
        });
    });
    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",
                   ...