Opening Links in Pop-up Windows or Frames
FusionCharts Suite XT lets you define simple links that:
-
open in the same window
-
open in a new window
-
open in a new pop-up window
-
open in a new frame
-
render the whole chart as a hotspot
-
invoke existing JavaScript functions present within the same page
In this section, you will be shown how you can:
Opening Links in Pop-up Windows
A column 2D chart configured with links that open in a pop-up window is shown below:
{
"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 |
|---|---|
|
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 A unique name should be specified for each pop-up window that you have configured for your chart. |
In the data structure above:
-
detailsWinis 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 |
|---|---|
|
It is used to specify the height of the pop-up window, in pixels. |
|
It is used to specify the width of the pop-up window, in pixels. |
|
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 |
|
It is used to specify whether scrollbars will be shown for the pop-up window. Setting this attribute to |
|
It is used to specify whether a menu bar will be shown at the top of the pop-up window. Setting this attribute to |
|
It is used to specify whether the toolbar will be shown for the pop-up window. Setting this attribute to |
|
It is used to specify whether the Address bar will be shown in the pop-up window. Setting this attribute to |
|
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 |
|
It is used to specify whether the status bar will be displayed at the bottom of the pop-up window. Setting this attribute to |
|
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 |
|
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 |
|
It is used to specify whether the pop-up window will be opened in full-screen mode. Setting this attribute to |
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 :
Opening Links in Frames
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:
{
"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 |
|---|---|
|
To open a link in a pop-up window, prefix the target URL with |
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.