FusionCharts - create thumbnails of a chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Vishalika

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>
<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","showlegend":"0",
            "caption": "",
            "subCaption": "",
            "xAxisName": "",
            "yAxisName": "",
            "showXAxisLine": "0",
            "showYAxisLine": "0",
            "numDivLines": "0",
            "enableSlicing": "0",
            "enableRotation": "0"
        });
        // 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": "Product-wise break-up of quarterly revenue in last year",
                "subcaption": "Harry's SuperMart",
                "xaxisname": "Quarter",
                "yaxisname": "Sales (In USD)",
                "paletteColors": "#0075c2,#45AFF5,#2C8A56,#1aaf5d,#50DE90",
               ...