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.

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 charts elements
Disable all Charting Interactivities
Present a static chart

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"` `showAxisLimitgrid-lines: "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": "fusion",
            "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();
});