|
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/advanced/ |
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>Plotting Discontinuous data </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", "Advanced charting", "Plotting discontinuous data" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Plotting Discontinuous data </td>
</tr>
<tr>
<td valign="top" class="text"><p>You might often want to plot charts with incomplete data points - that is, missing data. For example, when plotting a monthly sales chart, you might not have data for all the months. So, you might just want to indicate the missing data with a blank space on the chart not plotting anything at that particular place. FusionCharts XT lets you do this very easily.</p>
<p>Consider the following XML: </p></td>
</tr>
<tr>
<td valign="top">
<div class="container">
<ul class="tabs">
<li><a href="#tab1">XML</a></li>
<li><a href="#tab2">JSON</a></li>
</ul>
<div class="tab_container" style="width:100%;height:360px; overflow:auto;">
<div id="tab1" class="tab_content">
<pre class="prettyprint code_container"><chart >
<set label='Jan' value='420' />
<set label='Feb' value='295' />
<set label='Mar' value='523' />
<set label='Apr' value='473' />
<strong><set label='May' />
<set label='Jun' /> </strong>
<set label='Jul' value='354' />
<set label='Aug' value='457' />
<set label='Sep' value='127' />
<set label='Oct' value='354' />
<set label='Nov' value='485' />
<set label='Dec' value='486' />
</chart></pre></div>
<div id="tab2" class="tab_content">
<pre id="pre-datajson" class="prettyprint code_container">{<br /> "chart":{},<br /> "data":[{<br /> "label":"Jan",<br /> "value":"420"<br /> },<br /> {<br /> "label":"Feb",<br /> "value":"295"<br /> },<br /> {<br /> "label":"Mar",<br /> "value":"523"<br /> },<br /> {<br /> "label":"Apr",<br /> "value":"473"<br /> },<br /> {<br /> <strong> "label":"May"</strong><br /> },<br /> {<br /> <strong>"label":"Jun"</strong><br /> },<br /> {<br /> "label":"Jul",<br /> "value":"354"<br /> },<br /> {<br /> "label":"Aug",<br /> "value":"457"<br /> },<br /> {<br /> "label":"Sep",<br /> "value":"127"<br /> },<br /> {<br /> "label":"Oct",<br /> "value":"354"<br /> },<br /> {<br /> "label":"Nov",<br /> "value":"485"<br /> },<br /> {<br /> "label":"Dec",<br /> "value":"486"<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>Here, we do not have data for May and June. So, we are not providing any value attribute for the same. The chart will look as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/DiscChart.jpg" alt="" width="462" height="211" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>You can see that there are no columns for May and June in this chart. </p>
<p>If you run the same data against a Line chart, you will see the following output: </p> </td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/DiscChart2.jpg" class="imageBorder"/></td>
</tr>
<tr>
<td valign="top" class="text"><p>The line chart shows a break for May and Jun, as there is no data for the same. If you do not even have data labels for the missing data, you can write empty set elements for the missing data as under:</p>
<div class="container">
<ul class="tabs">
<li><a href="#tab3">XML</a></li>
<li><a href="#tab4">JSON</a></li>
</ul>
<div class="tab_container">
<div id="tab3" class="tab_content">
<pre class="prettyprint code_container"><set /></pre></div>
<div id="tab4" class="tab_content">
<pre id="pre-datajson4" class="prettyprint code_container">"data":[{}<br /> ]</pre>
</div></div></div></td>
</tr>
<tr><td height="25"></td></tr>
<tr>
<td valign="top" class="header"><a name="null" id="null"></a>Connecting Null Data </td>
</tr>
<tr>
<td valign="top" class="text"><p>In our above Line chart, we were showing a break for the months of May and June. If you do not want to show this break for May and Jun, and want April to directly connect to July, you can do so using the <span class="codeInline">connectNullData</span> attribute. </p>
<p>To do so, you just need to set <span class="codeInline"><chart ... connectNullData='1' ..></span> and the chart will now look as under: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/DiscChart3.jpg" class="imageBorder"/></td>
</tr>
<tr>
<td valign="top" class="text"><p>This attribute is valid for all the Line and Area charts. </p>
<p>The complete XML data for chart reproduced again, as under: </p></td>
</tr>
<tr>
<td valign="top">
<div class="container">
<ul class="tabs">
<li><a href="#tab5">XML</a></li>
<li><a href="#tab6">JSON</a></li>
</ul>
<div class="tab_container" style="width:100%;height:360px; overflow:auto;">
<div id="tab5" class="tab_content">
<pre class="prettyprint code_container"><chart showValues='0' connectNullData='1'>
<set label='Jan' value='420' />
<set label='Feb' value='295' />
<set label='Mar' value='523' />
<set label='Apr' value='473' />
<set label='May' />
<set label='Jun' />
<set label='Jul' value='354' />
<set label='Aug' value='457' />
<set label='Sep' value='127' />
<set label='Oct' value='354' />
<set label='Nov' value='485' />
<set label='Dec' value='486' />
</chart></pre></div>
<div id="tab6" class="tab_content">
<pre id="pre-datajson2" class="prettyprint code_container">{<br /> "chart":{<br /> "showvalues":"0",<br /> "connectnulldata":"1"<br /> },<br /> "data":[{<br /> "label":"Jan",<br /> "value":"420"<br /> },<br /> {<br /> "label":"Feb",<br /> "value":"295"<br /> },<br /> {<br /> "label":"Mar",<br /> "value":"523"<br /> },<br /> {<br /> "label":"Apr",<br /> "value":"473"<br /> },<br /> {<br /> "label":"May"<br /> },<br /> {<br /> "label":"Jun"<br /> },<br /> {<br /> "label":"Jul",<br /> "value":"354"<br /> },<br /> {<br /> "label":"Aug",<br /> "value":"457"<br /> },<br /> {<br /> "label":"Sep",<br /> "value":"127"<br /> },<br /> {<br /> "label":"Oct",<br /> "value":"354"<br /> },<br /> {<br /> "label":"Nov",<br /> "value":"485"<br /> },<br /> {<br /> "label":"Dec",<br /> "value":"486"<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>Or, if you want to highlight this break while connecting, you can use the dashed feature as under: </p></td>
</tr>
<tr>
<td valign="top"><div class="container">
<ul class="tabs">
<li><a href="#tab7">XML</a></li>
<li><a href="#tab8">JSON</a></li>
</ul>
<div class="tab_container" style="width:100%;height:360px; overflow:auto;">
<div id="tab7" class="tab_content">
<pre class="prettyprint code_container"><chart showValues='0' connectNullData='1' lineDashGap='6'>
<set label='Jan' value='420' />
<set label='Feb' value='295' />
<set label='Mar' value='523' />
<set label='Apr' value='473' <strong>dashed='1'</strong>/>
<set label='May' />
<set label='Jun' />
<set label='Jul' value='354' />
<set label='Aug' value='457' />
<set label='Sep' value='127' />
<set label='Oct' value='354' />
<set label='Nov' value='485' />
<set label='Dec' value='486' />
</chart></pre></div>
<div id="tab8" class="tab_content">
<pre id="pre-datajson3" class="prettyprint code_container">{<br /> "chart":{<br /> "showvalues":"0",<br /> "connectnulldata":"1",<br /> "linedashgap":"6"<br /> },<br /> "data":[{<br /> "label":"Jan",<br /> "value":"420"<br /> },<br /> {<br /> "label":"Feb",<br /> "value":"295"<br /> },<br /> {<br /> "label":"Mar",<br /> "value":"523"<br /> },<br /> {<br /> "label":"Apr",<br /> "value":"473",<br /> <strong>"dashed":"1"</strong><br /> },<br /> {<br /> "label":"May"<br /> },<br /> {<br /> "label":"Jun"<br /> },<br /> {<br /> "label":"Jul",<br /> "value":"354"<br /> },<br /> {<br /> "label":"Aug",<br /> "value":"457"<br /> },<br /> {<br /> "label":"Sep",<br /> "value":"127"<br /> },<br /> {<br /> "label":"Oct",<br /> "value":"354"<br /> },<br /> {<br /> "label":"Nov",<br /> "value":"485"<br /> },<br /> {<br /> "label":"Dec",<br /> "value":"486"<br /> }<br /> ]<br />}</pre>
</div></div></div></td>
</tr>
<tr>
<td valign="top" class="text"><p>This will result in the following chart: </p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="Images/DiscChart4.jpg" class="imageBorder"/></td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Using Special punctuations|special-chars/SpPunctuation.html","Highlighting selective data|Highlight.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>