|
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>Using JavaScript functions as links</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", "JavaScript functions as links" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Using JavaScript functions as links</td>
</tr>
<tr>
<td valign="top" class="text">
<p>Instead of using simple links, you can also set JavaScript links using FusionCharts XT. That is, you can invoke a JavaScript function present in the same page (in which the chart is present) when the end viewer clicks a data element on the chart. </p>
<p> FusionCharts XT provides two ways of setting JavaScript functions as links:</p>
<ol>
<li><strong><span class="codeInline">j-</span> prefix </strong>: Just place the function name after the j- notation. The function will be evaluated as a standard JavaScript function and anything placed after the function name separated by a - (dash) will be passed as a single String parameter to the function. For example, <br />
<br />
<span class="code_container codeInline"><set label='USA' value='235' link="<strong>j-</strong>myJS-USA,235"/></span><br />
<br />
In the above code snippet, <span class="codeInline">myJS</span> refers to a custom
JavaScript function present in the HTML page that embeds this chart and <span class="codeInline">USA,235</span> is the parameter value passed to the function. You
can pass only a single String parameter to this function. When you
now click the data item (column, pie, bar etc.) for this particular data, <span class="codeInline">myJS </span>function will be invoked and '<span class="codeInline">USA,
235'</span> will be passed to the function as the function parameter. Here,
we have passed the data label and value just for demonstration purposes.
In actual charts, you can pass identifier numbers or strings of each data.
When the user clicks on the link, these identifiers can be sent back to
your JavaScript function for further actions (like loading detailed data
for that identifier using AJAX or anything - the possibilities are endless).<br />
<br />
</li>
<li><span class="codeInline"><strong>JavaScript:</strong></span><strong> prefix</strong> : provide single or multiple JavaScript functions or statements after <span class="codeInline">JavaScript:</span> prefix. For example, <br />
<br />
<span class="code_container codeInline"><set label='USA' value='235' link="<strong>JavaScript: isJavaScriptCall=true; alert('hi JS!'); myJS('USA',235);</strong>"/></span><br />
<br />
In the above code snippets, we have set the value of variable <span class="codeInline">isJavaScriptCall</span> to <span class="codeInline">true</span>. Next, we call JavaScript <span class="codeInline">alert</span>. Finally, we call<span class="codeInline"> myJS</span> which refers to a custom
JavaScript function present in the HTML page that embeds this chart. You
can also specify any number of parameters for this function. When you
now click the data item (column, pie, bar etc.) for this particular data, <span class="codeInline">myJS </span>function will be invoked and '<span class="codeInline">USA</span>' will be passed as the first parameter (string) and
<span class="codeInline">235</span> will be passed as second parameter (numeric) to the function.<br />
</li>
</ol>
<p class="highlightBlock"><strong>Advanced Note: Syntax of JavaScript links having J- prefix</strong> <br />
<br />
<b>j-</b>{<b>user function name</b>}-{<b>parameter</b>}<br />
<br />
The {user function name} is a user-defined function. It will receive the parameters as a <strong>single</strong> delimiter separated string. <br />
The {parameters} is a delimiter separated value field. The parameter field <em>should not be enclosed within quotes</em>. Using this method, you can just pass one parameter from chart to your JavaScript. So, when you need to pass multiple parameters, combine them using a delimiter in XML, and then in your JavaScript method split it again. <br />
<br />
The classical notation will be evaluated faster since no String decomposition takes place. However, the new syntax removes all the problems with nested quotation marks.</p>
<p>Let us quickly put up an example for these kind of links. We will create
a simple 2D Column chart indicating "ABC Bank Branches" in Asia.
Each column when clicked will pass its label and value to our custom
JavaScript function <span class="codeInline">myJS</span>, which (for the
sake of demonstration) will just write it out in an alert box. </p>
<p>We create <span class="codeInline">JSExample.html</span> for this example
in <span class="codeInline">DrillDown</span> folder. It contains the following
HTML code:</p></td>
</tr>
<tr>
<td valign="top">
<pre class="prettyprint code_container"><html>
<head>
<title>JavaScript Link Example</title>
<script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>
<SCRIPT LANGUAGE="JavaScript"><!--<strong>
function myJS(myVar){
window.alert(myVar);
}
</strong> // --></SCRIPT><strong><strong>
</strong></strong></head>
<body bgcolor="#ffffff">
<div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div>
<script type="text/javascript"><!--
var myChart = new FusionCharts("../FusionCharts/Column2D.swf",
"myChartId", "500", "300", "1",
"1");
myChart.setXMLUrl("JSExample.xml");
myChart.render("chartdiv");
//<strong> --></strong></script>
</body>
</html></pre>
<p>See it <a href="../../Code/DrillDown/JSExample.html" target="_blank">live</a>! </p> </td>
</tr>
<tr>
<td valign="top" class="text">
Here, we have defined a function <span class="codeInline">myJS</span>
which will respond to the clicks generated from the chart. Additionally, <strong>it is important</strong> to set the <span class="codeInline">registerWithJS</span> attribute in constructor to 1 (the last attribute in the line which initializes a FusionCharts XT chart in the page).
<p>Let us see how the function can be called using the two methods of defining JavaScript links: </p>
</td>
</tr>
<tr>
<td valign="top" class="header"><a name="j" id="j"></a>Using j- in JavaScript link</td>
</tr>
<tr>
<td valign="top" class="text">
<p>And now,<span class="codeInline"> JSExample.xml</span> looks as under:</p>
</td>
</tr>
<tr>
<td valign="top">
<pre class="prettyprint code_container"><chart caption='ABC Bank Branches' subCaption='(In
Asian Countries)' yaxislabel='Branches' xaxislabel='Country'>
<set label='Hong Kong' value='235' <strong>link='j-myJS-Hong Kong, 235'</strong>/>
<set label='Japan' value='123' <strong>link='j-myJS-Japan, 123'</strong>/>
<set label='Singapore' value='129' <strong>link='j-myJS-Singapore, 129'</strong>/>
<set label='Malaysia' value='121' <strong>link='j-myJS-Malaysia, 121'</strong>/>
<set label='Taiwan' value='110' <strong>link='j-myJS-Taiwan, 110'</strong>/>
<set label='China' value='90' <strong>link='j-myJS-China, 90'</strong>/>
<set label='S. Korea' value='86' <strong>link='j-myJS-S.Korea, 86'</strong>/>
</chart></pre>
</td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, for each data item, we have
defined a JavaScript link that points to the custom function <span class="codeInline">myJS</span>.
To this function, we are passing the name and value of the data item. </p>
<p>When you view the chart and click on a column, you will see something like
under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/JavaScript.jpg" width="510" height="347" /></td></tr>
<tr>
<td valign="top" class="text">See it <a href="../../Code/DrillDown/JSExampleJavaScript.html" target="_blank">live</a>!
</td>
</tr>
<tr>
<td valign="top"><p class="highlightBlock"><strong>Note:</strong> The above mentioned way of using JavaScript functions as links is supported by all the major browsers.</p> </td>
</tr>
<tr>
<td valign="top" class="header"><a name="javascript" id="javascript"></a>Using JavaScript: in JavaScript link</td>
</tr>
<tr>
<td valign="top" class="text"><p>Using this method, the<span class="codeInline"> JSExample.xml</span> will look like this:</p></td>
</tr>
<tr>
<td valign="top">
<pre class="prettyprint code_container"><chart caption='ABC Bank Branches' subCaption='(In
Asian Countries)' yaxislabel='Branches' xaxislabel='Country'>
<set label='Hong Kong' value='235' <strong>link="JavaScript:myJS('Hong Kong,235');"</strong>/>
<set label='Japan' value='123' <strong>link="JavaScript:myJS('Japan, 123');"</strong>/>
<set label='Singapore' value='129' <strong>link="JavaScript:myJS('Singapore, 129');"</strong>/>
<set label='Malaysia' value='121' <strong>link="JavaScript:myJS('Malaysia, 121');"</strong>/>
<set label='Taiwan' value='110' <strong>link="JavaScript:myJS('Taiwan, 110');"</strong>/>
<set label='China' value='90' <strong>link="JavaScript:myJS('China, 90');"</strong>/>
<set label='S. Korea' value='86' <strong>link="JavaScript:myJS('S.Korea, 86');"</strong>/>
</chart></pre>
</td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, for each data item, we
used<strong class="codeInline"> JavaScript:</strong>, instead of <span class="codeInline"><strong>j-</strong></span>, which points to the custom function <span class="codeInline">myJS</span>, and the function call is written exactly like JavaScript notation. Apart from this, everything else remains same.</p></td>
</tr>
<tr>
<td class="highlightBlock"><strong>Note</strong>: In certain rare cases after chart export, Internet Explorer fails to invoke JavaScript functions as links using this method. So we recommend using <span class="codeInline">j-</span> method. </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("Full chart as hotspot|ClickURL.html", "<i>LinkedCharts</i>|LinkedCharts.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>