Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT enables you to render the entire chart as one clickable hotspot. A prominent example of a chart rendered as a hotspot is showing a thumbnail image of the chart, which, when clicked, will open as its maximized version.

In this section, you will be shown how you can set a chart as a hotspot.

A column 2D chart rendered as a hotspot is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Top 3 Juice Flavors", "subCaption": "Last year", "xAxisName": "Flavor", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "theme": "fint", "clickURL": "n-http://www.fusioncharts.com" }, "data": [ { "label": "Apple", "value": "810000" }, { "label": "Cranberry", "value": "620000" }, { "label": "Grapes", "value": "350000" } ] }
{
    "chart": {
        "caption": "Top 3 Juice Flavors",
        "subCaption": "Last year",
        "xAxisName": "Flavor",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "theme": "fint",
        "clickURL": "n-http://www.fusioncharts.com"
    },
    "data": [
        {
            "label": "Apple",
            "value": "810000"
        },
        {
            "label": "Cranberry",
            "value": "620000"
        },
        {
            "label": "Grapes",
            "value": "350000"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Top 3 Juice Flavors",
            "subCaption": "Last year",
            "xAxisName": "Flavor",
            "yAxisName": "Amount (In USD)",
            "numberPrefix": "$",
            "theme": "fint",
            "clickURL": "n-http://www.fusioncharts.com"
        },
        "data": [{
            "label": "Apple",
            "value": "810000"
        }, {
            "label": "Cranberry",
            "value": "620000"
        }, {
            "label": "Grapes",
            "value": "350000"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Clicking anywhere on this chart redirects you to the FusionCharts home page in a new browser tab.

Given below is a brief description of the attribute used to render the chart as a hotspot:

Attribute Description

clickURL

It is used to specify the target URL to which the user is redirected to when the chart is clicked.

By default, the target URL opens in the same browser page as the chart. To open it in a new page, prepend n- to the URL.

You can configure the target URL to:

If you set the entire chart as hotspot, the other links on the chart (individual links for data plots) will not work.

Internally the chart decodes the URL that you set as the link. Before invoking the link, it again encodes the URL. If you are passing multilingual characters via a URL or do not want this decode-encode mechanism to be handled by the chart, you can use the unescapeLinks attribute as shown in the code snippet below :

{
    "chart" : {
        "unescapeLinks" : "0"
        ...
    }
    ...
}

Creating a Thumbnail of the Chart

An example of creating thumbnails for charts is shown below:

FusionCharts will load here..
{ "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" } ] }
{
    "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "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"
        }]
    },
    events: {
        'beforeRender': function(evt, args) {
            // Create div for thumbnails
            var thumbnails = document.createElement('div');
            thumbnails.innerHTML = '<div id="thumbnail-column"></div><div id="thumbnail-pie"></div><div id="thumbnail-bar"></div></div>';
            thumbnails.style.cssText = 'display:inline-block; float:left;';

            // Append thumbnails div before chart-container
            args.container.parentNode.insertBefore(thumbnails, args.container);

            // Append line-breaker div after chart-container
            var divBreak = document.createElement('div');
            divBreak.style.cssText = 'clear: both;';
            args.container.parentNode.insertBefore(divBreak, args.container.nextSibling);

            // Set CSS style for chart-container
            args.container.style.cssText = 'padding:5px; font-size:11px; display:inline-block; float:left; clear:right;';
        },
        'renderComplete': function(evt, args) {
            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,
                        "events": {}
                    });
                // turn off properties which are not required
                clonedChart.setChartAttribute({
                    "showValues": "0",
                    "showLabels": "0",
                    "animation": "1",
                    "exportEnabled": "0",
                    "showTooltip": "0",
                    "showHoverEffect": "1",
                    "showYAxisValues": "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() {
                    if (chartId != evt.sender.id) {
                        // rendering the new chart
                        FusionCharts(chartId).render(args.container);
                    }
                });
                // create the thumbnail
                clonedChart.render(divId);
            };

            // Create instance of all charts (including current one)
            var revenueChartColumn = evt.sender.clone({
                id: 'revenue-chart-column',
                events: {}
            });
            var revenueChartPie = evt.sender.clone({
                type: 'pie2d',
                id: 'revenue-chart-pie',
                events: {}
            });
            var revenueChartBar = evt.sender.clone({
                type: 'bar2d',
                id: 'revenue-chart-bar',
                events: {}
            });

            // 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');
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the example above, a column 2D chart shows the monthly revenue for the last year at Harry’s SuperMart. To the left of the column 2D chart are three thumbnails - one for a column 2D chart, one for a pie chart, and one for a bar 2D chart. When a thumbnail is clicked, the monthly revenue data for Harry’s SuperMart is shown using the chart type in the thumbnail.

The code above shows clones of the existing chart being created. FusionCharts Suite XT v3.5.0 supports the clone() method that allows you to render a copy of an existing chart - one that displays the same data with a different chart type. This saves you from writing the code multiple times to render it with different chart types.

Top