Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT lets you define simple links that:

In this section, you will be shown how you can:

A column 2D chart configured with links that open in a pop-up window is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Top 3 Juice Flavors", "subCaption": "Last year", "xAxisName": "Flavor", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "placevaluesInside": "1", "theme": "fint" }, "data": [ { "label": "Apple", "value": "810000", "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-http://fusioncharts.com" }, { "label": "Cranberry", "value": "620000", "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-http://www.fusioncharts.com/explore/charts/" }, { "label": "Grapes", "value": "350000", "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-http://blog.fusioncharts.com/" } ] }
{
    "chart": {
        "caption": "Top 3 Juice Flavors",
        "subCaption": "Last year",
        "xAxisName": "Flavor",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "placevaluesInside": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Apple",
            "value": "810000",
            "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-http://fusioncharts.com"
        },
        {
            "label": "Cranberry",
            "value": "620000",
            "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-http://www.fusioncharts.com/explore/charts/"
        },
        {
            "label": "Grapes",
            "value": "350000",
            "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-http://blog.fusioncharts.com/"
        }
    ]
}
<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": "$",
            "placevaluesInside": "1",
            "theme": "fint"
        },

        "data": [{
            "label": "Apple",
            "value": "810000",
            "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-http://fusioncharts.com"
        }, {
            "label": "Cranberry",
            "value": "620000",
            "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-http://www.fusioncharts.com/explore/charts/"
        }, {
            "label": "Grapes",
            "value": "350000",
            "link": "P-detailsWin,width=400,height=300,toolbar=no,scrollbars=yes, resizable=no-http://blog.fusioncharts.com/"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above chart, each time a data plot is clicked, the target URL configured for that data plot opens in a pop-up window.

Given below is a brief description of the attribute used to configure links to open in pop-up windows:

Attribute Description

link

It is used to specify the URL of the page to which the user is redirected to when a data plot is clicked. This attribute belongs to the data object and is specified for each data plot that is clickable. To open a link in a pop-up window, prefix the target URL with P- followed by the window name.

A unique name should be specified for each pop-up window that you have configured for your chart.

In the data structure above:

  • detailsWin is specified as the name of the new pop-up window in which the target URL will be rendered

  • the window is configured using its cosmetic and functional attributes (explained in the table below)

  • the URL Encoded link to be invoked is specified. A hyphen is used as the separator between the attributes and the link.

Given below is a brief description of the attributes that can be configured for the pop-up window:

Attribute Description

height

It is used to specify the height of the pop-up window, in pixels.

width

It is used to specify the width of the pop-up window, in pixels.

resizable

It is used to specify whether the manual resizing of the window, by dragging its edges or corners, will be enabled. Setting this attribute to yes will enable manual resizing, setting it to no will disable it.

scrollbars

It is used to specify whether scrollbars will be shown for the pop-up window. Setting this attribute to yes will show the scrollbars, setting it to no (default) will hide them.

menubar

It is used to specify whether a menu bar will be shown at the top of the pop-up window. Setting this attribute to yes will show the menu bar, setting it to no (default) will hide it.

toolbar

It is used to specify whether the toolbar will be shown for the pop-up window. Setting this attribute to yes will show the toolbar, setting it to no (default) will hide it.

location

It is used to specify whether the Address bar will be shown in the pop-up window. Setting this attribute to yes will show the Address bar, setting it to no (default) will hide it.

directories

It is used to specify whether any additional toolbars (for example, the Links bar in IE) will be shown for the pop-up window. Setting this attribute to yes will show them, setting it to no (default) will hide them.

status

It is used to specify whether the status bar will be displayed at the bottom of the pop-up window. Setting this attribute to yes will show the status bar, setting it to no (default) will hide it.

left

It is used to specify the distance, in pixels, of the pop-up window from the left edge of the screen. This attributes applies only to the Internet Explorer. If you are using the Netscape Navigator, use the screenX attribute.

top

It is used to specify the distance, in pixels, of the pop-up window from the top edge of the screen. This attributes applies only to the Internet Explorer. If you are using the Netscape Navigator, use the screenY attribute.

fullscreen

It is used to specify whether the pop-up window will be opened in full-screen mode. Setting this attribute to yes will show the window in full-screen mode.

These attributes may not be compatible with all browsers. To check browser compatibility, click here.

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"
        ...
    }
    ...
}

FusionCharts Suite XT allows you to open links in specified frames on the web page. This feature is useful when you need to create simulated drill-down boards and dashboards.

A column 2D chart configured with links that open in a frame is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Top 3 Juice Flavors", "subCaption": "Last year", "xAxisName": "Flavor", "yAxisName": "Amount (In USD)", "numberPrefix": "$", "placevaluesInside": "1", "theme": "fint", "rotateValues": "0" }, "data": [ { "label": "Apple", "value": "810000", "link": "F-drill-http://fusioncharts.com" }, { "label": "Cranberry", "value": "620000", "link": "F-drill-http://www.fusioncharts.com/explore/charts/" }, { "label": "Grapes", "value": "350000", "link": "F-drill-http://blog.fusioncharts.com/" } ] }
{
    "chart": {
        "caption": "Top 3 Juice Flavors",
        "subCaption": "Last year",
        "xAxisName": "Flavor",
        "yAxisName": "Amount (In USD)",
        "numberPrefix": "$",
        "placevaluesInside": "1",
        "theme": "fint",
        "rotateValues": "0"
    },
    "data": [
        {
            "label": "Apple",
            "value": "810000",
            "link": "F-drill-http://fusioncharts.com"
        },
        {
            "label": "Cranberry",
            "value": "620000",
            "link": "F-drill-http://www.fusioncharts.com/explore/charts/"
        },
        {
            "label": "Grapes",
            "value": "350000",
            "link": "F-drill-http://blog.fusioncharts.com/"
        }
    ]
}
<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": "$",
            "placevaluesInside": "1",
            "theme": "fint",
            "rotateValues": "0"
        },

        "data": [{
            "label": "Apple",
            "value": "810000",
            "link": "F-drill-http://fusioncharts.com"
        }, {
            "label": "Cranberry",
            "value": "620000",
            "link": "F-drill-http://www.fusioncharts.com/explore/charts/"
        }, {
            "label": "Grapes",
            "value": "350000",
            "link": "F-drill-http://blog.fusioncharts.com/"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of how the link attribute is used to open links in frames:

Attribute Description

link

To open a link in a pop-up window, prefix the target URL with F- followed by the frame name. The URL Encoded link is then specified after the frame name with the - (hyphen) used as the separator.

You can provide _parent as the name of the frame. The URL will get loaded in the frame or browser window which is the parent of the current window. Typically, the main browser space becomes the parent frame that contains all the other frames. Hence, if you wish to remove all frames and load the URL freshly on the same location you can use _parent as the name of the frame.

Top