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:

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:

The data structure needed to render the above chart is given below:

• JSON
• XML

{
    "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"
        }
    ]
}

You can configure the target URL to:

• open in the same window

• open in a new window

• open in another frame

• open in a new pop-up window

• 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:

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 data structure needed to render the above example is given below:

• JSON
• XML

{
    "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"
        }
    ]
}

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.

There! You have now seen how you can render a chart as a hotspot and as a thumbnail version of itself.