Displaying a table with a chart in javascript and add logo

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

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",
            //External image url path for logo
            "logoURL": "http://static.fusioncharts.com/sampledata/images/Logo-HM-72x72.png",
             //Setting logo position
                "logoPosition":"TR"
        },
            "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...