|
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>Zoom Line Chart 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", "Zoom Line chart JSON" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Zoom Line Chart JSON </td>
</tr>
<tr>
<td valign="top" class="text">
<p>The Zoom Line chart is essentially a multi-series line chart with intuitive zooming, scrolling, and pinning capabilities. It can handle large datasets (of tens of thousands of points) easily. </p>
<p>Shown below is a sample Zoom Line chart:</p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../ChartSS/Images/MSZoomLine1.jpg" width="650" height="400" /></td>
</tr>
<tr>
<td valign="top" class="text">
<p>Zoom Line Chart can accept JSON data in two formats:</p>
<ul>
<li><a name="standard" id="standard"></a><a href="MultiSeries.html"><strong>Standard Multi-series JSON Data</strong></a>: The advantage of this format is that you do not need to change your existing code. Additionally, you can specify <span class="codeInline">displayValue </span>and <span class="codeInline">toolText </span>for each point. However, for large datasets using this format, the JSON gets big in size and takes a lot of time to parse. Use this format when you've less than 1,000 data points to show on the chart. </li>
<li><strong><a name="compact" id="compact"></a>Compact JSON data</strong>: This is a new data format specifically introduced for zoom chart. Using this format, you can provide tens of thousands of data points. This format reduces the JSON size and parsing time. Use this format when you have more than 1,000 data points to show on the chart.</li>
</ul>
<p>Let's have a look at the JSON data for a Zoom Line chart:</p>
<p>Since the standard <a href="MultiSeries.html">Multi-series JSON format</a> has already been discussed, we will skip this and proceed with compact JSON data format:</p>
</td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint lang-js">{
"chart":{
"caption":"Web visits",
"compactdatamode":"1",
"dataseparator":"|"
},
"categories":"Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec",
"dataset":[{
"seriesname":"2006",
"data":"27400|29800|25800|26800|29600|32600|31800|36700|29700|31900|34800|24800"
},
{
"seriesname":"2005",
"data": "10000|11500|12500|15000|11000|9800|11800|19700|21700|21900|22900|20800"
}
],
"trendlines": {
"line": [
{
"startvalue": "15000",
"displayvalue": "Trend Line 1"
},
{
"startvalue": "33000",
"endvalue": "35000",
"istrendzone": "1",
"displayvalue": "Trend Zone 1",
"showontop": "1",
}
]
},
"vtrendlines": {
"line": [
{ "startindex": "5", "displayalways": "1", "displayvalue": "Split", "valueontop": "1" },
{
"index": "30",
"displayalways": "0",
"displaywhencount": "20",
"displayvalue": "Dividend",
"dashed": "1",
"showontop": "1",
"color": "FF5904",
"thickness":"2",
"dashlen": "3",
"dashgap": "3"
}
]
}
}</pre>
</td>
</tr>
<tr>
<td valign="top" class="text"><br />
<br />
<a name="jsoncompactdataformatchagenote"></a>
<div class="code_container" >
<p style="color:#420000; margin:0px;"><strong>Important note to users upgrading from FusionCharts XT-Service Release 2 or lower version:</strong></p>
<p>To overcome a browser related issue, we had no options but to change the Compact JSON data format for Zoom line chart. The changes are listed below: </p>
<ul>
<li><strong>Change in the <span class="codeInline">categories</span> property</strong>: The list of categories are passed as a single string as the value of the <span class="codeInline">categories</span> property.
For example, <span class="codeInline">"categories":
"Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec"</span><br />
<br />
In earlier versions, the list of categories is passed through the <span class="codeInline">category</span> property in the following fashion: <span class="codeInline">"categories":</span><span class="darkYellowTr codeInline"> [{ "category":[ </span><span class="codeInline">"Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec"</span><span class="darkYellowTr codeInline"> ] } ]</span><br />
<br />
</li>
<li><strong>Change in the <span class="codeInline">data </span> property of the <span class="codeInline">dataset</span> property</strong>: The list of data values are passed as a single string as the value of the <span class="codeInline">data</span> property.
For example,
<span class="codeInline">"data": "27400|29800|25800|26800|29600|32600|31800|36700|29700|31900|34800|24800"</span><br />
<br />
In earlier versions, the list of data values is passed through the data property in the following fashion: <span class="codeInline">"data":</span><span class="darkYellowTr codeInline"> [ </span><span class="codeInline">"27400|29800|25800|26800|29600|32600|31800|36700|29700|31900|34800|24800"</span><span class="darkYellowTr codeInline"> ]</span><br />
</li>
</ul>
</div>
<p>When specifying data in compact mode, you will necessarily need to specify two attributes in the chart object:</p>
<ul>
<li><span class="codeInline">"compactDataMode":"1"</span> : This tells the chart that data has been specified in compact mode. </li>
<li><span class="codeInline">"dataSeparator"="|" </span>: This specifies the separator character that will be used to separate labels and data. In the example above, we have used the '|' (pipe) character. You can use comma, semi-colon or any other character. Just make sure that the character is not a part of any label text.</li>
</ul>
<p>The Zoom Line chart supports horizontal trend lines (<span class="codeInline">trendlines</span> and <span class="codeInline">zones</span>) like a standard multi-series chart. However, it supports index based vertical trend lines (<span class="codeInline">vtrendlines</span>) that can be displayed conditionally based on what level of zoom the user has applied on the chart. Following is the JSON code for a vertical trendline:</p>
<pre class="code_container prettyprint">{
"startindex": "5",
"displayalways": "1",
"displayvalue": "Split",
"valueontop": "1"
}</pre>
<p>The above vertical trendline has an attribute <span class="codeInline">displayAlways='1'</span> which instructs the chart to show the trendlines at all times, irrespective of level of zoom the chart is being viewed at. Also, the position of trend line is specified in indexes (<span class="codeInline">startIndex</span> and <span class="codeInline">endIndex</span>). Index is based on the number of data items plotted on x-axis (<span class="codeInline">category</span>). The first x-axis label has an index of 1. </p>
<p>Following is the JSON code for a conditional vertical trendline:</p>
<pre class="code_container prettyprint">{
"index": "30",
"displayalways": "0",
"displaywhencount": "20",
"displayvalue": "Dividend",
"dashed": "1",
"showontop": "1",
"color": "FF5904",
"thickness": "2",
"dashlen": "3",
"dashgap": "3"
}</pre>
<p>This line has an additional attribute <span class="codeInline">"displayWhenCount":"20"</span> that instructs the chart to show the trendline only when the user has zoomed into the chart -such that only 20 or lesser number of data points are visible in single screen. </p></td>
</tr>
<tr>
<td valign="top" class="header"><a name="featurenotsupported" id="featurenotsupported"></a>Features from standard FusionCharts XT not present in Zoom Line Chart </td>
</tr>
<tr>
<td valign="top" class="text"><p>The zoom line chart does not support certain features/attributes which are standard in FusionCharts XT. This is has been done to facilitate plotting of large datasets. They are: </p>
<ul>
<li>Compact data format does not support <span class="codeInline">displayValue</span> and <span class="codeInline">toolText </span>for each data item. However, standard data format does accept it</li>
<li>Input number formatting is not present in this chart (that is, where numbers could be provided in European format and the chart converted them to standard numeric format)</li>
<li>Linking of individual data points is not supported in this chart, as click action causes zooming</li>
<li>vLines are not supported in this chart, you can use <span class="codeInline">vTrendLines</span> instead</li>
<li>Tooltips are not supported on trend lines</li>
<li>Animation is not supported in this chart </li>
<li>Individual <span class="codeInline"><set></span> anchors cannot be customized. The customization can only be done at <span class="codeInline"><dataset></span> level </li>
</ul></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Multi Series Stacked chart JSON|MSStacked.html","JSON for <i>LinkedCharts</i>|LinkedCharts.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>