FusionCharts - Thumbnail charts

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="content">
    <div id="thubmnail">
        <div id="thumbnail-column"></div>
        <div id="thumbnail-pie"></div>
        <div id="thumbnail-bar"></div>
    </div>
    <div id="chart">
        <div id="chart-container">FusionCharts will render here</div>
    </div>
</div>

CSS

#thubmnail, #chart {
    float: left;
    }

JavaScript

FusionCharts.ready(function () {
    // write a function which creates a thumbnail of the required dimensions but turning off some of the properties which are not required in a thumbnail, for some other charts there might be a few more additional properties that need to be turned off.
    var createThumbNail = function (chartId, width, height, divId) {
        // we clone the chart first and then set new width and height
        var chartRef = FusionCharts(chartId),
            clonedChart = chartRef.clone({
                "width": width,
                    "height": height
            });

        // turn off properties which are not required
        clonedChart.setChartAttribute({
            "showValues": "0",
                "showLabels": "0",
                "animation": "0",
                "exportEnabled": "0",
                "showTooltip": "0",
                "showHoverEffect": "0",
                "showYAxisValues": "0",
                "caption": "",
                "subCaption": "",
                "xAxisName": "",
                "yAxisName": "",
                "showXAxisLine": "0",
                "showYAxisLine": "0",
                "numDivLines": "0",
                "enableSlicing": "0",
                "enableRotation": "0"
        });

        // listen for the chartClick event to render the detailed chart
        clonedChart.addEventListener('chartClick', function () {
            FusionCharts(chartId).render('chart-container');
        });

        // create the thumbnail
        clonedChart.render(divId, 'append');
    };

    // since data is common for all three charts, we store it in a common variable
    var chartData = {
        "chart": {
            "caption": "Harry's SuperMart",
                "subCaption": "Monthly revenue for last year",
                "xAxisName": "Month",
                "yAxisName": "Amount",
                "numberPrefix": "$",
                "theme": "fint",
                "rotateValues": "1",
      ...