|
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>Linking to Frames</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 Frames" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Linking to Frames</td>
</tr>
<tr>
<td valign="top" class="text"><p>FusionCharts XT allows you to open links in
specified frames too. To do so, you just specify the name of the frame
in the link itself. This feature can be very useful when creating simulated
drilldown reports and dashboards.</p>
<p>To open link in a specified frame, you need to set the link as under:</p>
<p class="codeInline"><set ... value='2235' link='F-FrameName-ShowDetails.asp%3FMonth%3DJan'
... ></p>
<p>The first character in the link is F, denoting that we need to open this
link in a frame. Post F, we add a dash character (-) and then specify
the name of frame in which we want the link to open. Soon after the frame
name, we add another dash character and finally write the actual link
which is to be opened. <strong>Again, the link needs to be URL Encoded.</strong></p>
<p class="highlightBlock"><strong>Advanced Note : </strong>You can provide <span class="codeInline">_parent</span> 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 frames. Hence, if you wish to remove all frames and load the URL freshly on the same location you can use <span class="codeInline">_parent </span>as the name of the frame. </p>
<p>XML Example:</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='F-<strong>detailsFrame</strong>-../DemoLinkPages/DemoLink1.html'/>
<set label='Feb' value='19800' link='F-<strong>detailsFrame</strong>-../DemoLinkPages/DemoLink2.html'/>
<set label='Mar' value='21800' link='F-<strong>detailsFrame</strong>-../DemoLinkPages/DemoLink3.html'/>
<set label='Apr' value='23800' link='F-<strong>detailsFrame</strong>-../DemoLinkPages/DemoLink4.html'/>
<set label='May' value='29600' link='F-<strong>detailsFrame</strong>-../DemoLinkPages/DemoLink5.html'/>
<set label='Jun' value='27600' link='F-<strong>detailsFrame</strong>-../DemoLinkPages/DemoLink6.html'/>
</chart></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>In this example, the main frameset is contained
in <span class="codeInline">FrameExample.html</span>, which has two vertical
frame pane- one on top containing the chart (<span class="codeInline">FramePages\FrameChart.html</span>)
and one on bottom to show the linked frame pages. The bottom pane by default
shows <span class="codeInline">FramePages\LowerFrame.html</span> which
contains the message "Click on columns above to view details ".</p>
<p>The setup looks as under:</p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/Frames.jpg" width="552" height="425" border="1" /><p>See it <a href="../../Code/DrillDown/FrameExample.html" target="_blank">live</a>!</p>
<p>The HTML code of <span class="codeInline">FrameExample.html</span>
is as under:</p></td>
</tr>
<tr>
<td valign="top"><pre class="prettyprint code_container"><html>
<head>
<title>FusionCharts XT Frame Drill-down example</title>
</head><br /> <frameset rows="350,*" cols="*" frameborder="YES" border="1" framespacing="0">
<frame src="FramePages/FrameChart.html" name="chartFrame" scrolling="NO" noresize >
<frame src="FramePages/LowerFrame.html" name="detailsFrame" scrolling="Auto" noresize>
</frameset>
</html></pre><br /></td>
</tr>
<tr>
<td valign="top" class="text"><p>The top frame (<span class="codeInline">FramePages\FrameChart.html</span>)
contains the chart and is named as <span class="codeInline">chartFrame</span>.
The bottom frame responds to click events from the chart - it is named
as <span class="codeInline">detailsFrame</span>, and we use this name
in our XML data links.</p>
<p>When the user now clicks on the chart links, they open up in <span class="codeInline">detailsFrame</span>
frame pane, which is what we exactly wanted to.</p>
<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("Simple Example|Simple.html","Links in pop-up windows|PopUps.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>