FusionCharts API-Event: dataRestored

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>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.powercharts.js"></script>
<!-- This sample shows the event parameters, and their values, when dataRestored event is triggered-->
<div id="indicatorDiv">Event name: <strong> dataRestored </strong> 
    
    <p>Triggered when all data plots on the interactive charts (select-scatter, drag-node, and drag-able charts) are restored to their original values (by clicking the <strong> Restore </strong> button).</p>
    <p>When triggered, the dataRestored event will provide the <strong> eventObj </strong> object (object containing information generic to all events) parameter for the handler.</p>
    <p>Drag the data plots to update the data. Click the Restore button to trigger the event. Scroll down to the table rendered below the chart to view information contained in the eventObj object.</p>
    
</div>
<div id="chart-container">FusionCharts will render here</div>
<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;
}
#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 salesPrediction = new FusionCharts({
        type: 'dragarea',
        renderAt: 'chart-container',
        width: '500',
        height: '350',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Quarterly Unit Sales - Apple vs Samsung",
                    "subCaption": "Drag anchors to change estimated values",
                    "subCaptionFontSize": "12",
                    "xAxisName": "Quarter",
                    "yAxisName": "No. of Units",
                    "theme": "fint"
            },
                "categories": [{
                "category": [{
                    "label": "Q1"
                }, {
                    "label": "Q2"
                }, {
                    "label": "Q3(E)"
                }, {
                    "label": "Q4(E)"
                }]
            }],
                "dataset": [{
                "seriesname": "Apple",
                    "valuePosition": "ABOVE",
                    "allowDrag": "0",
                    "data": [{
                    "value": "1200"
                }, {
                    "value": "1500",
                        "dashed": "1"
                }, {
                    "value": "1300",
                        "allowDrag": "1",
                        "dashed": "1"
                }, {
                    "value": "900",
                        "allowDrag": "1",
                        "tooltext": "Predicted sales $value units"
                }]
            }, {
                "seriesname": "Samsung",
                    "allowDrag": "0",
                    "data": [{
                    "value": "600"
                }, {
                    "value": "850",
                        "dashed": "1"
                }, {
                    "value": "1000",
                        "allowDrag": "1",
                        "dashed": "1"
                }, {
                    "value": "1200",
   ...