|
Server : Apache/2.2.17 (Unix) mod_ssl/2.2.17 OpenSSL/0.9.8e-fips-rhel5 DAV/2 PHP/5.2.17 System : Linux localhost 2.6.18-419.el5 #1 SMP Fri Feb 24 22:47:42 UTC 2017 x86_64 User : nobody ( 99) PHP Version : 5.2.17 Disable Function : NONE Directory : /home/queenjbs/www/FusionChart/Contents/DrillDown/ |
Upload File : |
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts Link format </title>
<link rel="stylesheet" href="../assets/ui/css/style.css" type="text/css" />
<script type="text/javascript" src="../assets/prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify.css" />
<script type="text/javascript" src="../assets/ui/js/jquery.min.js" ></script>
<style type="text/css">
<!--
div.WebHelpPopupMenu { position:absolute;
left:0px;
top:0px;
z-index:4;
visibility:hidden; }
a.whtbtnhide, a.whtbtnshow, a.whtbtnhidenav , a.whtbtnshownav { border-bottom:none !important; }
-->
</style>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whmsg.js"></script>
<script type="text/javascript" language="javascript" src="../assets/ui/js/whver.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whproxy.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whutils.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whlang.js"></script>
<script type="text/javascript" language="javascript1.2" src="../assets/ui/js/whtopic.js"></script>
<script type="text/javascript" src="../assets/ui/js/lib.js"></script>
</head>
<body>
<!-- breadcrumb starts here -->
<div id="breadcrumb"></div>
<script type="text/javascript">
document.write( addFCBreadcrumb( [ "Home|../Introduction/Overview.html", "Drill-down charts|Simple.html", "FusionCharts Link format" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader"><a href="../DrillDown/LinkFormat.html"></a>FusionCharts Link format </td>
</tr>
<tr>
<td valign="top" class="text">
<p>FusionCharts XT provides the option to turn each dataplot item (like column, pie etc.) or the whole chart as a hotspot that be clicked on for drilldown. A dataplot item is set as hotspot by setting <span class="codeInline">link </span>attribute for that dataplot in chart data. A full chart is set as a hotspot using <span class="codeInline">clickURL</span> of chart data source. Additionally, you can set a link for <span class="codeInline">about menu item</span> using <span class="codeInline"> aboutMenuItemLink</span> attribute. You can also set a link to the branding logo using <span class="codeInline">logoLink </span>attribute.</p>
<p> The syntax of the hotspot links follow a specific format which is termed as <em>FusionCharts Link Format</em>. In most cases, the syntax can be identified as two or more sections separated by a dash (-). The leftmost section generally specifies the type of the link followed by other required parameters. The formats can be listed as follows: </p>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table">
<tr>
<td width="100" class="header">Link type </td>
<td width="95" class="header">Prefix</td>
<td width="305" class="header">Syntax</td>
<td width="806" class="header">What it does </td>
<td width="350" class="header">Example</td>
</tr>
<tr class="trVeryLightGrayBg">
<td>Simple</td>
<td>none</td>
<td> URL </td>
<td>Opens the URL in the same window where the chart is rendered. It replaces the page containing the chart. The URL can be absolute or relative to the page containing the chart. <a href="Simple.html#simple">Read More »</a></td>
<td class="codeInline">link="http://www.fusioncharts.com"</td>
</tr>
<tr>
<td>New window </td>
<td>N-</td>
<td>N-url</td>
<td>Opens the URL in a new browser window. To use this feature, you need to disable any popup blockers in the browser. The URL can be absolute or relative to the page containing the chart. <a href="Simple.html#newwindow">Read More »</a></td>
<td class="codeInline">link="N-../detailedChart.aspx"</td>
</tr>
<tr class="trVeryLightGrayBg">
<td>Frame</td>
<td>F-</td>
<td>F-FrameName-url</td>
<td>Opens the URL in a frame or an iframe. The name of the frame is passed as the first parameter after the prefix followed by the URL to open. The URL can be absolute or relative to the page containing the chart. <a href="Frames.html">Read More »</a></td>
<td class="codeInline">link="F-detailsFrame-DemoLink1.html"</td>
</tr>
<tr>
<td>Popup</td>
<td>P-</td>
<td>P-nameOfWindow,Popup settings-url</td>
<td>Opens link in a configurable pop-up window. The first parameter after the prefix <span class="codeInline">P-</span> is the name of the pop-up window. This is followed by comma separated list of attributes for the new window. The last parameter is the URL. The URL can be absolute or relative to the page containing the chart. <a href="PopUps.html">Read More »</a></td>
<td class="codeInline">link="P-detailsWin,width=400, height=300, toolbar=no, scrollbars=no, resizable=no-ShowDetails.asp" </td>
</tr>
<tr class="trVeryLightGrayBg">
<td>JavaScript</td>
<td>JavaScript:</td>
<td>JavaScript:JavaScript statement</td>
<td>Any JavaScript statement or function call can be passed as a parameter, which is then executed when the link is clicked.<a href="JavaScript.html"> Read More »</a></td>
<td class="codeInline">link="JavaScript<strong>:</strong>myJSFunction('USA', 235);"</td>
</tr>
<tr>
<td>JavaScript</td>
<td>J-</td>
<td>J-JavaScriptFunctionName-parameters</td>
<td>A single JavaScript function is called using this link type. The name of the JavaScript function is followed by the prefix <span class="codeInline">J-</span>. The function will be passed as a single String parameter, which comes after the function name. <a href="JavaScript.html">Read More »</a></td>
<td>
<p class="codeInline">link="j-myJSFunction-China, 90"</p>
</td>
</tr>
<tr class="trVeryLightGrayBg">
<td valign="top"><em>LinkedCharts</em></td>
<td valign="top">newchart-</td>
<td valign="top">newchart-dataformat-datasource</td>
<td valign="top">This link invokes and creates <em>LinkedCharts</em>. The first parameter after <span class="codeInline">newchart</span>- prefix is the data format of the LinkedChart data. The second format specifies the URL or ID of the data source as per the data format. <a href="LinkedCharts.html#link">Read More »</a></td>
<td><span class="codeInline">link="newchart-xmlurl-quarterly2005.xml" </span><br />
<br />
or<br />
<br />
<span class="codeInline">link="newchart-xml-2004quarterly" </span><br />
<br />
or<br />
<br />
<span class="codeInline">link="newchart-jsonurl-2005.json"</span> <br />
<br />
or<br />
<br />
<span class="codeInline">link="newchart-json-2006Data"</span> <br />
<br />
<br />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p class="highlightBlock">Note: Internally the chart decodes a URL that you set as 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 chart, you can set <span class="codeInline">unescapeLinks='0' </span>in <span class="codeInline"><chart></span> element of the chart's XML data. If you are using JSON data, you need to use <span class="codeInline">{ "chart" : { "unescapeLinks" : "0" ... } ... }</span> . </p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("<i>LinkedCharts</i>|LinkedCharts.html","FusionCharts XT and JavaScript|../JavaScript/JS_Overview.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>