Setting the Chart as a Hotspot
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:
{
"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 |
|---|---|
|
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 |
You can configure the target URL to:
-
open in the same window
-
open in a new window
-
open in another frame
-
invoke existing JavaScript functions defined within the same page
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:
{
"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.