|
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/JSON/ |
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 JSON</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", "JSON|Overview.html", "<i>LinkedCharts</i> JSON" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td valign="top" class="pageHeader"> <i>LinkedCharts</i> JSON</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 JSON data source using data-string for rendering <i>LinkedCharts</i>. For better understanding, we will create a JSON 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, 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> Embedding data-source as string of <i>LinkedCharts</i> in the data of master chart</p>
<p>Following is the JSON data for a chart which contains <i>LinkedChart</i> data:</p>
<pre class="prettyprint code_container" style="height:500px; overflow:auto;">{
"chart":{
"caption":"Yearly Sales", "xaxisname":"Year", "yaxisname":"Sales" },
"data":[
{ "label":"2004", "value":"37800", "link":"newchart-json-2004-quarterly" },
{ "label":"2005","value":"21900", "link":"newchart-json-2005-quarterly" },
{ "label":"2006", "value":"32900", "link":"newchart-json-2006-quarterly" },
{ "label":"2007", "value":"39800", "link":"newchart-json-2007-quarterly" }
],
"linkeddata":[{
"id":"2004-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2004",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[
{ "label":"Q1", "value":"3700" },
{ "label":"Q2", "value":"2900" },
{ "label":"Q3", "value":"3200" },
{ "label":"Q4", "value":"3900" }
]
}
},
{
"id":"2005-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2005",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[
{ "label":"Q1", "value":"7800" },
{ "label":"Q2", "value":"2100" },
{ "label":"Q3", "value":"3290" },
{ "label":"Q4", "value":"3800" }
]
}
},
{
"id":"2006-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2006",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[
{ "label":"Q1", "value":"3800" },
{ "label":"Q2", "value":"2190" },
{ "label":"Q3", "value":"3290" },
{ "label":"Q4", "value":"3980" }
]
}
},
{
"id":"2007-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2007",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[
{ "label":"Q1", "value":"3780" },
{ "label":"Q2", "value":"1900" },
{ "label":"Q3", "value":"2900" },
{ "label":"Q4", "value":"9800" }
]
}
}
]
}
</pre>
<p>The initial part of JSON provides the data for the master chart:</p>
<pre class="prettyprint code_container lang-js">{
"chart":{
"caption":"Yearly Sales", "xaxisname":"Year", "yaxisname":"Sales" },
"data":[
{ "label":"2004", "value":"37800", "link":"newchart-json-2004-quarterly" },
{ "label":"2005", "value":"21900", "link":"newchart-json-2005-quarterly" },
{ "label":"2006", "value":"32900", "link":"newchart-json-2006-quarterly" },
{ "label":"2007", "value":"39800", "link":"newchart-json-2007-quarterly" }
],</pre>
<p>Note, that every object in the <span class="codeInline">data</span> array contains the <span class="codeInline">link</span> property. The value of this property follows the syntax: </p>
<pre class="codeInline"><a name="linkid" id="linkid"></a>"link":"newchart-json-id"</pre>
<ul>
<li><span class="codeInline">newchart</span> - indicates that a click action on the dataplot will lead to rendering of a new <i>LinkedChart</i></li>
<li><span class="codeInline">json</span> - indicates that the new chart will use JSON data</li>
<li><span class="codeInline">id</span> - this can be any string, and each object of the data array must have a unique link id. This ID will be searched in the<span class="codeInline"> id </span> property under the <span class="codeInline"> linkeddata </span>array object, later in the JSON. Once matched, the chart data present in that object, will be used as the data for the <i>LinkedCharts,</i> which opens up when a particular link is clicked. </li>
</ul>
<p>Next, separate chart objects for each <i>LinkedChart</i> are declared under the <span class="codeInline">linkeddata</span> array. Following JSON code provides data for a drill-down chart, which will render when the first column of the master chart is clicked:</p>
<pre class="prettyprint code_container lang-js"> "linkeddata":[{
"id":"2004-quarterly",
"linkedchart":{
"chart":{
"caption":"Quarterly Sales Summary",
"subcaption":"For the year 2004",
"xaxisname":"Quarter",
"yaxisname":"Sales"
},
"data":[
{ "label":"Q1", "value":"3700" },
{ "label":"Q2", "value":"2900" },
{ "label":"Q3", "value":"3200" },
{ "label":"Q4", "value":"3900" }
]
}
},</pre>
<p>The JSON data of drill-down charts is specified under the <span class="codeInline">linkeddata</span> array, each object in this array contains an <span class="codeInline">id</span> property and a linkedchart object - which holds the JSON data for a drill down chart - corresponding to that id. Essentially, the id helps in mapping each object of the <span class="codeInline">linkeddata</span> array to its corresponding object in the <span class="codeInline">data </span>array object for the master chart. In the above code, the object of the <span class="codeInline">linkeddata</span> array whose<span class="codeInline"> id is </span>"2004-quarterly" matches with the id provided in the <span class="codeInline">link</span> property of the first object of the <span class="codeInline">data</span> array pertaining to the master chart " <span class="codeInline">link":"newchart-json-<strong>2004-quarterly</strong>"</span>. Hence, when the first data-plot of the master chart is clicked, the chart that opens up - will take data from this object. </p>
</td>
</tr>
<tr>
<td valign="top" class="header"><a name="url" id="url"></a>Setting data-source as URL of the <i>LinkedCharts</i> in the data of master chart</td>
</tr>
<tr>
<td valign="top" class="text">
<p>Instead of embedding the data of the <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 following code below":</p>
<pre class="prettyprint code_container">"chart":{
"caption":"Yearly Sales", "xaxisname":"Year", "yaxisname":"Sales" },
"data":[
{ "label":"2004", "value":"37800", "link":"newchart-<strong>jsonurl</strong>-<strong>Data2004.json</strong>" },
{ "label":"2005","value":"21900", "link":"newchart-jsonurl-Data2005.json" },
{ "label":"2006", "value":"32900", "link":"newchart-jsonurl-Data2006.json" },
{ "label":"2007", "value":"39800", "link":"newchart-jsonurl-Data2007.json" }
],</pre>
<p>Note, here also, every object in the <span class="codeInline">data</span> array contains the <span class="codeInline">link</span> property. The value of this property follows the syntax: </p>
<pre class="codeInline"><a name="linkurl" id="linkurl"></a>"link":"newchart-jsonurl-url"</pre>
<ul>
<li><span class="codeInline">newchart</span> - indicates that a click action on the dataplot will lead to rendering of a new <i>LinkedChart</i></li>
<li><span class="codeInline">jsonurl</span> - indicates that the new chart will get JSON data from a URL </li>
<li><span class="codeInline">url</span> - sets the URL of the JSON data source of each <i>LinkedChart</i></li>
</ul>
<p>The link property specifies that the new chart will load JSON data from a URL. When the first dataplot is clicked, a drill-down chart will be rendered based on data obtained from <span class="codeInline">Data2004.json</span>. </p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Zoom Line chart JSON|ZoomLine.html","Chart Configurations - Chart Border & Background|../../AttDesc/Background.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>