|
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/FirstChart/ |
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>Adding drill-down links to charts</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", "Creating your first chart|FirstChart.html", "Adding Drill-down links to charts" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Adding drill-down links to charts</td>
</tr>
<tr>
<td class="text">
<p>All charts in the FusionCharts XT pack (barring zoom-line chart) support drill-down functionality. This means that you can convert individual data plots (columns in column chart, pie slices in pie chart etc.) or the whole chart into hotspots (or links). These items, when clicked, can open URLs, call JavaScript functions or load <i>LinkedChart</i>s. </p>
<p>Broadly, the drill-down feature can be divided into two types:</p>
<ol>
<li><strong>Simple links </strong>: Drill-down to open simple URLs or call JavaScript functions (present on same page) </li>
<li><strong>Chart links</strong> (<i>LinkedCharts</i>): Drill-down to detailed <i>LinkedCharts</i> </li>
</ol>
<p>Using FusionCharts XT, you can create endless levels of drill-down. It has been kept very generic to accommodate all types of requirements. </p>
</td>
</tr>
<tr>
<td class="header"><a name="simplelinks" id="simplelinks"></a>Using <strong>Simple</strong> Links </td>
</tr>
<tr>
<td class="text"><p>Using Simple links, you can provide a URL for the linked page (or JavaScript function) for each data item on chart (columns, line anchors, area anchors, pie slices, etc.). Simple links can be in various formats:</p>
<ul><li><a href="../DrillDown/Simple.html">Simple links that open URL in the same page</a></li>
<li><a href="../DrillDown/Simple.html#newwindow">Simple links that open URL in a new browser window </a></li>
<li><a href="../DrillDown/Frames.html">Links that open URL in a specified frame/iframe</a></li>
<li><a href="../DrillDown/PopUps.html">Links that open URL in a new pop-up window</a></li>
<li><a href="../DrillDown/JavaScript.html">Links that invoke JavaScript functions (present either in FusionCharts JavaScript class or on the same web page)</a></li>
<li><a href="../DrillDown/ClickURL.html">Set the whole chart as a hot-spot and apply any of the above simple-link features</a></li>
</ul><br />
</td>
</tr>
<tr>
<td class="header"><a name="xml_link" id="xml_link"></a>Creating simple links using XML</td>
</tr>
<tr>
<td class="text">
<p>You can convert a data plot into a link simply by introducing the <span class="codeInline">link </span>attribute into the <span class="codeInline"><set></span> element. Here is an example:</p>
<pre class="code_container prettyprint lang-xml"><chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
<set label='Jan' value='17400'<strong> link='DemoLinkPages/DemoLink1.html'</strong>/> <!-- Simple Link -->
<set label='Feb' value='19800' link='<strong>n-</strong>DemoLinkPages/DemoLink2.html'/> <!-- Link in new window -->
<set label='Mar' value='21800' link='<strong>F-</strong>detailsFrame-DemoLinkPages/DemoLink3.htm'/> <!-- Link in a frame -->
<set label='Apr' value='23800' link='<strong>P-</strong>detailsPopUp,width=400,height=300,toolbar=no,
scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/> <!-- Link in a pop-up -->
<set label='May' value='29600' link='<strong>j-</strong>myJavaScriptFunction-parameters'/> <!-- JavaScript function as link -->
</chart></pre>
<p>The links defined in the XML exemplify all the simple link types like simple URL, URL in new page, frame, popup, and JavaScript.</p></td>
</tr>
<tr>
<td class="header"><a name="json_link" id="json_link"></a>Creating links using JSON</td>
</tr>
<tr>
<td class="text">
<p>Similarly, if you are using JSON data instead of XML, you must add the <span class="codeInline">link</span> property to the data object in the following way:</p>
</td>
</tr>
<tr>
<td class="text">
<pre class="code_container prettyprint lang-js">{
"chart":{
"caption":"Monthly Sales Summary",
"subcaption":"For the year 2006",
"xaxisname":"Month",
"yaxisname":"Sales",
"numberprefix":"$"
},
"data":[
{ "label":"Jan", "value":"17400", "link":"DemoLinkPages/DemoLink1.html" },
{ "label":"Feb", "value":"19800", "link":"n-DemoLinkPages/DemoLink2.html" },
{ "label":"Mar", "value":"21800", "link":"F-detailsFrame-DemoLinkPages/DemoLink3.htm" },
{ "label":"Apr", "value":"23800", "link":"P-detailsPopUp,width=400,height=300,toolbar=no," +
"scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html" },
{ "label":"May", "value":"29600", "link":"j-myJavaScriptFunction-parameters" }
]
}
</pre>
<br />
</td>
</tr>
<tr>
<td class="header"><a name="linkedchart" id="linkedchart"></a>Using <i>LinkedCharts</i></td>
</tr>
<tr>
<td class="text">
<p>This is an easy way of building drill-down charts, where detailed charts can be made to replace the parent chart or, open up in a separate dialog. The feature also allows configuration of drill-down charts from a single data source. The process has been explained in detail in <a href="LinkedCharts.html">next page</a>.</p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Creating database driven charts|DatabaseCharts.html","Creating <i>LinkedCharts</i>|LinkedCharts.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>