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/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>
<div id="chart-container">FusionCharts will render here</div>
<div id="table-container">The table corresponding to the chart will render here</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({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: data
    });
    var renderTable = function (chart, containerId) {
        // after the chart is rendered export the data as CSV, pasre it and then create a markup equivalent to a table by parsing the exported CSV.
        var data = chart.getDataAsCSV(),
            rows, 
            row,
            i,
            length, 
            tableBody = '',
            tableHeader = '';
        // get all the rows by splitting data with '\n' seperator
        rows =...