Render Thumbnail Versions of Charts

FusionCharts Suite XT gives you an option to render your charts as thumbnail versions, which is useful when space is a limitation. It may be required at times to show only thumbnail versions of charts. These thumbnails when clicked will expand to render a chart.

Shown below is an example with chart thumbnails that enlarge on click.

FusionCharts will load here..

Chart thumbnails are characterised by the following:

Only plots are rendered while all other chart elements are hidden

Interactivity is disabled
Animation is disabled
Generic features are disabled

In a nutshell, a chart thumbnail is like a static image with an associated link accessible via click/touch. Lets discuss the characteristic features and how to implement them using FusionCharts.

In this section, you will learn how to:

Render Plots shedding all other Chart elements

A chart is composed of a host of elements. The general elements and how to hide them is tabulated as below.

Chart elements	Attributes and values	Description
Captions	`caption: ""` `subcaption: ""`	Hide caption and subcaption
Canvas	`showCanvasBorder: "0"` `numDivLines: "0"` `showAxisLimitGridLines: "0"`	Hide canvas along with grid lines
Background	`bgAlpha: "0"` `showBorder: "0"`	Possibly hide chart background and border
Axes	`showXAxisLine: "0"` `showYAxisLine: "0"`	Do not show axes
Axis Names	`xAxisName: ""` `yAxisName: ""`	Hide axis names
Axis labels	`showLabels: "0"` `showYAxisValues: "0"`	Hide x-axis labels and y-axis values
Data values	`showValues: "0"`	Hide data value labels with the plots
Legend	`showLegend: "0"`	Hide legend
Plot	`showShadow: "0"` `showPlotBorder: "0"` `drawAnchors: "0"`	Remove extra cosmetics from the plots like border and shadow. You may not render anchors in line / area charts.
Logo	`logoURL: ""`	Remove link to logo image if any

Disable all Charting Interactivities

Charts have varying interactive feature. However some of these interactivities are common across the suite. The following table summarise the common ones.

Attribute	Value	Description
`showTooltip`	`0`	Disable tooltext on plot hover
`showHoverEffect`	`0`	Deactivate plot hover effects
`clickURL`	`""`	Remove link associated to chart if any

Static Presentation of Chart

An image type presentation makes it necessary to be visually static. Some of the required measures in this context are given below.

Attribute	Value	Description
`animation`	`0`	Disable initial animation

The JavaScript code to show the above effect is given below:

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",
            "exportEnabled": "1"
        },
 
        "data": [{
            "label": "Jan",
            "value": "420000"
        }, {
            "label": "Feb",
            "value": "810000"
        }, {
            "label": "Mar",
            "value": "720000"
        }, {
            "label": "Apr",
            "value": "550000"
        }, {
            "label": "May",
            "value": "910000",
            "anchorRadius": "10",
            "anchorBorderColor": "0372AB",
            "anchorBgColor": "E1f5ff"
        }, {
            "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"
        }]
    };
 
    // create all the three chart instances of column, pie, bar
    var revenueChartColumn = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        id: 'revenue-chart-column',
        dataSource: chartData
    });
    var revenueChartPie = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        id: 'revenue-chart-pie',
        dataSource: chartData
    });
    var revenueChartBar = new FusionCharts({
        type: 'bar2d',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        id: 'revenue-chart-bar',
        dataSource: chartData
    });
 
    // create thumbnails for all the three charts
    createThumbNail('revenue-chart-column', 100, 100, 'thumbnail-column');
    createThumbNail('revenue-chart-pie', 100, 100, 'thumbnail-pie');
    createThumbNail('revenue-chart-bar', 100, 100, 'thumbnail-bar');
 
    // render column chart by default
    revenueChartColumn.render();
});