|
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/DataFormats/XML/ |
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>LinkedCharts XML</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","FusionCharts XT Data Formats", "XML|Overview.html", "<i>LinkedCharts</i> XML" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td valign="top" class="pageHeader"><i>LinkedCharts</i> XML</td>
</tr>
<tr>
<td valign="top" class="text">
<p>FusionCharts XT introduces <i>LinkedCharts</i>, which is a smart and efficient method of creating drill-down charts. <i>LinkedCharts</i> are not special chart types. Any chart can be used as a <i>LinkedChart</i>. You can create a master summarized chart whose data-plots, when clicked, will create detailed charts. You can define the data-string or data-url of the detailed charts <a href="#embedded">within the data-source of the master chart</a>. </p>
<p>This section shows how to create a single XML data source using data-string for rendering <i>LinkedCharts</i>. For better understanding, We will create an XML for a column chart – which shows sales for four years from 2004-2007. Clicking on a column (say 2005) will bring up another chart showing quarterly sales for that year (see image below).</p>
<table class="table" cellpadding="0" cellspacing="0"><tr><td>
<img src="../../FirstChart/Images/linked-charts.jpg" width="322" height="252" /></td>
<td align="center"><img src="../../FirstChart/Images/linked-charts-after-click.jpg" width="322" height="252" /></td>
</tr>
<tr>
<td>Main chart when the data for year 2005 is clicked </td>
<td><i>LinkedChart</i> with data for 2005 replaces the main chart </td>
</tr>
</table>
<p>Watch it <a href="../../../Code/MyFirstChart/linked-charts.html" target="_blank">live</a>!</p>
<p class="highlightBlock">To learn how <i>LinkedCharts</i> work, please read FusionCharts XT and JavaScript > <a href="../../JavaScript/JS_LinkedCharts.html">Using <i>LinkedCharts</i></a> page. </p>
<p class="header"><a name="embedded" id="embedded"></a> Embedded data-string of <i>LinkedCharts</i> in data of master chart</p>
<p>Following XML data contains data for <i>LinkedChart</i>s:</p>
<pre class="prettyprint code_container lang-xml"><chart caption="Yearly sales" xAxisName="Year" yAxisName="Sales">
<set label="2004" value="37800" link="newchart-xml-2004-quarterly" />
<set label="2005" value="21900" link="newchart-xml-2005-quarterly" />
<set label="2006" value="32900" link="newchart-xml-2006-quarterly" />
<set label="2007" value="39800" link="newchart-xml-2007-quarterly" />
<linkeddata id="2004-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2004"
xAxisName="Quarter" yAxisName="Sales" >
<set label="Q1" value="3700" />
<set label="Q2" value="2900" />
<set label="Q3" value="3200" />
<set label="Q4" value="3900" />
</chart>
</linkeddata>
<linkeddata id="2005-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2005"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="7800" />
<set label="Q2" value="2100" />
<set label="Q3" value="3290" />
<set label="Q4" value="3800" />
</chart>
</linkeddata>
<linkeddata id="2006-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2006"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="3800" />
<set label="Q2" value="2190" />
<set label="Q3" value="3290" />
<set label="Q4" value="3980" />
</chart>
</linkeddata>
<linkeddata id="2007-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2007"
xAxisName="Quarter" yAxisName="Sales">
<set label="Q1" value="3780" />
<set label="Q2" value="1900" />
<set label="Q3" value="2900" />
<set label="Q4" value="9800" />
</chart>
</linkeddata>
</chart>
</pre>
<p>The initial part of the XML defines the data for the master chart, and rest of the XML is a group of <span class="codeInline"><linkeddata> </span><span class="text">nod</span>es, each of which contains data for a specific <i>LinkedChart</i>. The XML data for the master chart is as shown follows: </p>
<pre class="prettyprint code_container lang-xml"><chart caption="Yearly sales" xAxisName="Year" yAxisName="Sales">
<set label="2004" value="37800" link="newchart-xml-2004-quarterly" />
<set label="2005" value="21900" link="newchart-xml-2005-quarterly" />
<set label="2006" value="32900" link="newchart-xml-2006-quarterly" />
<set label="2007" value="39800" link="newchart-xml-2007-quarterly" />
. . .</pre>
<p>Note, that every <span class="codeInline"><set></span> element contains the <span class="codeInline">link</span> attribute. The value of this attribute follows the syntax: </p>
<pre class="codeInline"><a name="linkwithid" id="linkwithid"></a>link="newchart-xml-id"</pre>
<ul>
<li><span class="codeInline">newchart</span> - indicates that the click action on the dataplot will lead to rendering of a new <i>LinkedChart</i></li>
<li><span class="codeInline">xml</span> - indicates that the new chart will use xml data</li>
<li><span class="codeInline">id</span> - this can be any string, and each set element must have a unique link id with the entire XML. This id will be searched in the<span class="codeInline"> id </span><span class="text">a</span>ttribute of<span class="codeInline"> <linkeddata> </span>node latter in the XML. Once matched, the chart data present in that node will be used as the data for the <i>LinkedChart</i>, which renders when a particular link is clicked. </li>
</ul>
<p>Next, separate nodes of chart XML data for each <i>LinkedChart</i> are declared under the <span class="codeInline"><linkeddata></span> element. Following XML shows one of the nodes, which provides data for a drill-down chart, which renders when the first column of the master chart is clicked:</p>
<pre class="prettyprint code_container lang-xml"><linkeddata id="2004-quarterly">
<chart caption="Quarterly Sales Summary" subcaption="For the year 2004"
xAxisName="Quarter" yAxisName="Sales" >
<set label="Q1" value="3700" />
<set label="Q2" value="2900" />
<set label="Q3" value="3200" />
<set label="Q4" value="3900" />
</chart>
</linkeddata></pre>
<p>The XML data for drill-down charts is specified under separate <span class="codeInline"><linkeddata></span> element, and each data node is mapped to its parent dataplot in the master chart by means of a unique id (which is specified in the individual <span class="codeInline"><set></span> element of the master chart). In the above XML the<span class="codeInline"> id</span> of this node is "2004-quarterly". This id matches with the id passed through the first dataplot's link attribute in the XML of the master chart : <span class="codeInline">link="newchart-xml-<strong>2004-quarterly</strong>"</span>. Hence, when the first data-plot is clicked, the chart that opens up will take data from this node. </p>
</td>
</tr>
<tr>
<td valign="top" class="header"><a name="url" id="url"></a>Providing URL of <em>LinkedChart</em> XML in the data-source of the master chart</td>
</tr>
<tr>
<td valign="top" class="text">
<p>Instead of embedding the data of <i>LinkedCharts</i> inside the data-source of the master chart, you can also specify the data source URL of the <i>LinkedCharts</i>. See the XML below":</p>
<pre class="prettyprint code_container"><chart caption="Yearly Sales" xAxisName="Year" yAxisName="Sales">
<set label="2004" value="37800" <strong>link="newchart-xmlurl-Data2004.xml"</strong> />
<set label="2005" value="21900" link="newchart-xmlurl-Data2005.xml" />
<set label="2006" value="32900" link="newchart-xmlurl-Data2006.xml" />
<set label="2007" value="39800" link="newchart-xmlurl-Data2007.xml" />
</chart></pre>
<p>Note, here also, every <span class="codeInline"><set></span> element contains the <span class="codeInline">link</span> attribute. The value of this attribute follows the syntax: </p>
<pre class="codeInline"><a name="linkwithurl" id="linkwithurl"></a>link="newchart-xmlurl-url"</pre>
<ul>
<li><span class="codeInline">newchart</span> - indicates that the click action on the dataplot will lead to rendering of a new <i>LinkedChart</i></li>
<li><span class="codeInline">xmlurl</span> - indicates that the new chart will get xml data from a URL </li>
<li><span class="codeInline">url</span> - sets the url/path of the xml data source</li>
</ul>
<p>When the first dataplot is clicked, a chart is rendered based on data obtained from the file <span class="codeInline">Data2004.xml</span>. </p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Zoom Line chart XML|ZoomLine.html","JSON Overview|../JSON/Overview.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>