FusionCharts - create thumbnails of a chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Moonmi 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 class="column">
<div id="thumbnail-column" class="thumb"></div>
<div id="thumbnail-pie" class="thumb"></div>
<div id="thumbnail-bar" class="thumb"></div>
</div>
<div id="chart-container" class="column">Click thumbnail for a detailed view</div>

CSS

.column {
    display: inline-block;
    float: left;
}

#chart-container {
    padding: 5px;
    font-size: 11px;
}

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 proeprties 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",
            "numVisiblePlot": "24",
        });
        // listend 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": "Sales Trends",
        "subcaption": "FY 2012 - FY 2013",
        "xaxisname": "Month",
        "yaxisname": "Revenue",
        "showvalues": "1",
        "placeValuesInside": "1",
        "rotateValues": "1",
        "valueFontColor": "#ffffff",
        "numberprefix": "$",
        "baseFontColor":...