Loading

It may be required at times to show only thumbnail versions of charts. These thumbnails when clicked will expand, this implementation is particularly useful when space is a limitation

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

FusionCharts will load here..

Chart thumbnails are characterised by the following:

  1. Only plots are rendered while all other chart elements are hidden

  2. Interactivity is disabled

  3. Animation is disabled

  4. 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.

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();
});
Top