|
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>Opening links in pop-up windows</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", "Links in pop-up windows" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Opening links in pop-up windows</td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT also allows you to open your
links in pop-up windows. To open a link in pop-up window, you need to
define the link as under:</p>
<p class="codeInline"><set .. value='235' link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no,
resizable=no-ShowDetails.asp%3FMonth%3DJan" /> </p>
<p>Here, we have done the following: </p>
<ol>
<li>Prefixed the link with <span class="codeInline">P-</span> so as to denote that the link is to be opened
in a new pop-up window. </li>
<li>Specified a name for the new window. In this case it is <span class="codeInline">detailsWin</span>.
If you want all the links to open in the same pop-up, use the same window
name across all links. However, if you want each link to open in a new
pop-up, specify a different window name for each link. </li>
<li>After the name of the pop-up window comes the list of attributes for
the new window separated by commas. Possible list of attributes is defined
below.</li>
<li>Finally, the actual link to be invoked is defined after a dash (-).
Again, the link is URL Encoded.</li>
</ol><br /></td>
</tr>
<tr>
<td valign="top" class="header"><a name="config" id="config"></a>Possible attributes for new window</td>
</tr>
<tr>
<td valign="top" class="text"><br /> <ul>
<li> <strong><span class="codeInline">height</span></strong><br>
Specifies the height of the window in pixels. <br>
Value = number<br>
</li>
<li> <span class="codeInline"><strong>width</strong></span> <br>
Specifies the width of the window in pixels. <br>
Value = number<br>
</li>
<li><span class="codeInline"><strong>resizable</strong></span> <br>
When enabled, allows the user to manually resize the window by dragging
its edges or corners. <br>
Value = yes or no, 1 or 0.<br>
</li>
<li> <span class="codeInline"><strong>scrollbars</strong></span> <br>
Specifies whether or not to display the horizontal and vertical scrollbars
that normally appear when the page content is larger than the screen.
<br>
Value = yes or no, 1 or 0.<br>
</li>
<li><span class="codeInline"><strong>menubar</strong></span><br>
Specifies whether or not to display a menu bar at the top of the window.
<br>
Value = yes or no, 1 or 0.<br>
</li>
<li> <span class="codeInline"><strong>toolbar</strong></span> <br>
Specifies whether or not to display the main toolbar (with the back,
forward, stop etc. buttons). <br>
Value = yes or no, 1 or 0.<br>
</li>
<li> <span class="codeInline"><strong>location</strong></span> <br>
Specifies whether or not to display the location bar (the Address Bar
in Internet Explorer) - where URLs are typed and displayed. <br>
Value = yes or no, 1 or 0.<br>
</li>
<li> <span class="codeInline"><strong>directories</strong></span> <br>
Specifies whether or not to display any additional toolbar (for example, the
Links Bar in Internet Explorer). <br>
Value = yes or no, 1 or 0.<br>
</li>
<li> <span class="codeInline"><strong>status</strong></span> <br>
Specifies whether or not to display the status bar at the foot of the
window. <br>
Value = yes or no, 1 or 0.<br>
</li>
<li> <span class="codeInline"><strong>left</strong></span> <br>
Specifies the distance in pixels of the new window from the left edge
of the screen. (This applies to Internet Explorer. For Netscape Navigator
use screenX). <br>
Value = number<br>
</li>
<li> <span class="codeInline"><strong>top</strong></span> <br>
Specifies the distance in pixels of the new window from the top edge
of the screen. (This applies to Internet Explorer. For Netscape Navigator
use screenY). <br>
Value = number<br>
</li>
<li> <span class="codeInline"><strong>fullscreen</strong></span> <br>
When enabled causes the window to open in full-screen mode (Internet
Explorer only.) <br>
Value = yes or no, 1 or 0.</li>
</ul></td>
</tr>
<tr>
<td valign="top" class="textBold"><p><a name="sample" id="sample"></a>Sample XML:</p>
</td>
</tr>
<tr>
<td valign="top"><pre class="prettyprint code_container"><chart caption='Monthly Sales Summary'
subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='Jan' value='17400' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink1.html'/><br /> <set label='Feb' value='19800' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink2.html'/><br /> <set
label='Mar' value='21800' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/><br /> <set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink4.html'/><br /> <set label='May' value='29600' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink5.html'/>
<set label='Jun' value='27600' link='P-detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink6.html'/><br /> </chart></pre>
<p>See it <a href="../../Code/DrillDown/PopUpExample.html" target="_blank">live</a>!</p></td>
</tr>
<tr>
<td 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("Links in Frames|Frames.html", "Full chart as hotspot|ClickURL.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>