FusionCharts API-Event: exported

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nikita Jhanglani

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 the event parameters, and their values, when exported event is triggered-->
<div id="indicatorDiv">Event name: <b> exported </b> 
    <br>
    <br>Triggered when a chart exports successfully.</br>
    <br>All events, when triggered, will provide two parameters for the handler - eventObj (object containing information generic to all events) and dataObj (object containing information specific to an event)</br>
        <br> Click the <b> Export Chart </b> button, in the top-right corner of the chart (<i> you may have to increase the width of the Result pane to access the button </i>). From the menu, <b> select the format </b> in which the chart has to be exported. The exported event is triggered after the chart is successfully exported. 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.</br>
    </br>
</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

#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 revenueChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Monthly revenue",
                    "subCaption": "Last Year",
                    "xAxisName": "Month",
                    "yAxisName": "Revenues",
                //Making the chart export enabled in various formats
                "exportEnabled": "1",
                    "exportFileName": "DemoExport",
                    "exportAction": "save",
                    "numberPrefix": "$",
                    "theme": "fint"
            },

                "data": [{
                "label": "Jan",
                    "value": "420000"
            }, {
                "label": "Feb",
                    "value": "810000"
            }, {
                "label": "Mar",
                    "value": "720000"
            }, {
                "label": "Apr",
                    "value": "550000"
            }, {
                "label": "May",
                    "value": "910000"
            }, {
                "label": "Jun",
                    "value": "510000"
            }, {
                "label": "Jul",
                    "value": "680000"
            }, {
                "label": "Aug",
                    "value": "620000"
            }, {
                "label": "Sep",
                    "value": "610000"
            }, {
                "label": "Oct",
                    "value": "490000"
            }, {
                "label": "Nov",
                    "value": "900000"
            }, {
                "label": "Dec",
                    "value": "730000"
            }]
        },
        events: {
            "beforeExport": function (evtObj, argObj) {
                var table = document.getElementById('attrs-table');
                table.innerHTML =...