FusionCharts - Export Chart Pure JavaScript Rendering (HTML5)

Created using FusionCharts Suite XT - www.fusioncharts.com

by Siva Subramaniam

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>
<!-- Exporting/downloading charts in different formats using FusionCharts Export chart feature. Clicking on the top right button opens the options to choose from.

# exportEnabled - set to 1. Setting this attribute to 1 shows a button at top right corner of the chart canvas and lets user to choose exporting the chart to images/PDFs.

-->

<div id="chart-container">FusionCharts will render here</div>

<div>
    <div id="indicatorDiv" style="width: 480px; font-family: 'Arial','Helvetica'; font-size: 14px; ">Event name: <b> beforeExport </b> 
        <br>
            <p>This event is fired when the chart export is about to begin. You can get useful information about the chart export like, export filename, export format, export handler server URL, callback function (if any)..etc from this event.</p>
            <p>The following details can be obtained from the argObj parameter to the event once you start downloading the chart</p>
        </br>
    </div>
    <div>
        <div id="header">
            <div class="parameter-name">Parameter Name</div>
            <div class="parameter-value">Parameter Value</div>
        </div>
        <div id="attrs-table" style="text-align: center;"></div>
    </div>
</div>

CSS

#header {
    display: none;
}
p {
   margin-top: 20px;
    margin-bottom: 20px;
}
.parameter-name, .parameter-value {
    width: 250px;
    font-weight: bold;
    text-align: center;
    float: left;
}
.title {
    clear: left;
    float: left;
    width: 250px;
    background: #fff;
    padding: 5px 0;
}
.title:nth-child(4n+1), .value:nth-child(4n+2) {
    background: rgb(0, 117, 194);
    color: #fff;
}
.value {
    float:left;
    width: 250px;
    background: #fff;
    padding: 5px 0;
}

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",
                "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) {
                    console.log(evtObj, argObj);
                    var header = document.getElementById('header');
                    header.style.display = 'block';

                var tempDiv =...