FusionCharts - Displaying a table with a chart in javascript.

Created using FusionCharts Suite XT - www.fusioncharts.com

by sanjuktamukherjee

HTML

<script src="http://static.fusioncharts.com/code/develop/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/develop/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/develop/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<div id="table-container">Click on a column to render table</div>

CSS

td, th {
    padding: 5px;
    text-align: center;
    border: 1px solid black;
    background-color: #f0f0f0;
    font-size: 11px;
}
th {
    color: #ff0000;
}

JavaScript

FusionCharts.ready(function () {
    // This data will be used to both render the chart and grid, since 
    // the grid need to be related with the chart.
    var data = {
        "chart": {
            "caption": "Harry's SuperMart",
                "subCaption": "Monthly revenue for last year",
                "xAxisName": "Month",
                "yAxisName": "Amount",
                "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"
        }]
    };

    var revenueChart = new FusionCharts({
        id: "revenueChart",
        type: 'column2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: data
    });



    var renderTable = function (e, a) {
        var data = revenueChart.getDataAsCSV(),
            rows,
            row,
            i,
            length,
            tableBody = '',
            tableHeader = '';

        rows = data.replace(/"/g, '').split('\n');
        for (i = 1, length = rows.length; i < length; i++) {
            row = rows[i].split(',');
   ...