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();
});
Was this article helpful to you ?
Where do you think this article needs improvement?

Share with your Colleagues