FusionCharts API-Event: beforeExport

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 beforeExport event is triggered-->
<div id="indicatorDiv">Event name: <b> beforeExport </b> 
    <br>
    <br>Triggered just before the exporting process of a chart begins, through the export context menu or when the exportChart() method is called programmatically.</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 beforeExport event is created after you select a format and just before the export process begins. </br> <br> 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",
                    "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: {
            /**
             * @description
             * Triggered just before the exporting process of a chart begins, through the export context menu or when the exportChart() method is called...