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.

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":{"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(){varfusioncharts=newFusionCharts({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 thumbnailsvarthumbnails=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-containerargs.container.parentNode.insertBefore(thumbnails,args.container);// Append line-breaker div after chart-containervardivBreak=document.createElement('div');divBreak.style.cssText='clear: both;';args.container.parentNode.insertBefore(divBreak,args.container.nextSibling);// Set CSS style for chart-containerargs.container.style.cssText='padding:5px; font-size:11px; display:inline-block; float:left; clear:right;';},'renderComplete':function(evt,args){varcreateThumbNail=function(chartId,width,height,divId){// we clone the chart first and then set new width and heightvarchartRef=FusionCharts(chartId),clonedChart=chartRef.clone({"width":width,"height":height,"events":{}});// turn off properties which are not requiredclonedChart.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 chartclonedChart.addEventListener('chartClick',function(){if(chartId!=evt.sender.id){// rendering the new chartFusionCharts(chartId).render(args.container);}});// create the thumbnailclonedChart.render(divId);};// Create instance of all charts (including current one)varrevenueChartColumn=evt.sender.clone({id:'revenue-chart-column',events:{}});varrevenueChartPie=evt.sender.clone({type:'pie2d',id:'revenue-chart-pie',events:{}});varrevenueChartBar=evt.sender.clone({type:'bar2d',id:'revenue-chart-bar',events:{}});// create thumbnails for all the three chartscreateThumbNail('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><divid="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.