|
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>Multi-series Stacked 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", "Multi-Series Stacked chart JSON" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Multi-series Stacked Chart JSON </td>
</tr>
<tr>
<td valign="top" class="text"><p>Multi-series stacked charts are useful when you have to show clustered stacked columns for every x-axis category. An example is shown below: </p>
</td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../ChartSS/Images/MSStCol2D.jpg" width="604" height="354" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>The JSON for the above chart looks as under:</p>
</td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint" style="height:500px; overflow:auto;">{
"chart":{
"caption":"Annual Revenue",
"subcaption":"In Million $",
"xaxisname":"Year",
"pyaxisname":"Sales in M$",
"syaxisname":"Cost as % of Revenue",
"decimals":"0",
"numberprefix":"$",
"numbersuffix":"M",
"snumbersuffix":"%25"
},
"categories":[{
"category":[
{ "label":"2001" },
{ "label":"2002" },
{ "label":"2003" },
{ "label":"2004" },
{ "label":"2005" }
]
}
],
"dataset":[{
"dataset":[{
"seriesname":"Product A",
"color":"AFD8F8",
"showvalues":"0",
"data":[
{ "value":"30" },
{ "value":"26" },
{ "value":"29" },
{ "value":"31" },
{ "value":"34" }
]
},
{
"seriesname":"Product B",
"color":"F6BD0F",
"showvalues":"0",
"data":[
{ "value":"21" },
{ "value":"28" },
{ "value":"39" },
{ "value":"41" },
{ "value":"24" }
]
}
]
},
{
"dataset":[{
"seriesname":"Service A",
"color":"8BBA00",
"showvalues":"0",
"data":[
{ "value":"27" },
{ "value":"25" },
{ "value":"28" },
{ "value":"26" },
{ "value":"10" }
]
},
{
"seriesname":"Service B",
"color":"A66EDD",
"showvalues":"0",
"data":[
{ "value":"17" },
{ "value":"15" },
{ "value":"18" },
{ "value":"16" },
{ "value":"10" }
]
},
{
"seriesname":"Service C",
"color":"F984A1",
"showvalues":"0",
"data":[
{ "value":"12" },
{ "value":"17" },
{ "value":"16" },
{ "value":"15" },
{ "value":"12" }
]
}
]
}
]
}</pre><br />
</td>
</tr>
<tr>
<td valign="top" class="header">Brief Explanation</td>
</tr>
<tr>
<td valign="top" class="text">
<p>The JSON structure of multi-series stacked chart is similar to that of a normal <a href="MultiSeries.html">multi series chart</a> except for a few elements.</p>
<p>Since multi-series stacked charts have multiple stacked columns category, all the series which form one stacked column are grouped together using nested dataset. This is done for each such cluster of stacked columns.</p>
<p> For example, in the above chart, we have two stacked data plots for each x-axis label. The first dataplot comprises of two data series with series name <span class="codeInline">Product A</span> and <span class="codeInline">Product B</span>. So the JSON of the first dataplot represents one dataset with two nested datasets each with series name <span class="codeInline">Product A</span> and <span class="codeInline">Product B</span> respectively. </p>
</td>
</tr>
<tr>
<td valign="top" class="header"><a name="dualy" id="dualy"></a>Multi-series stacked Column chart with Line dataset </td>
</tr>
<tr>
<td valign="top" class="text">
<p>An example of a Multi-series Stacked Column 2D Line Dual Y Combination Chart is given below:</p>
</td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../ChartSS/Images/StCol2DLineDY.jpg" width="604" height="354" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see in the image above, there is a line combined with the multi series stacked chart. To define the line, the <span class="codeInline">lineset</span>
object has to be defined in the JSON.</p>
<p>The JSON for the above Dual Y Multi series Stacked Combination chart looks as under:</p>
</td>
</tr>
<tr>
<td valign="top" class="text">
<pre class="code_container prettyprint" style="height:500px; overflow:auto;">{{
"chart":{
"caption":"Annual Revenue",
"subcaption":"In Million $",
"xaxisname":"Year",
"pyaxisname":"Sales in M$",
"syaxisname":"Cost as % of Revenue",
"decimals":"0",
"numberprefix":"$",
"numbersuffix":"M",
"snumbersuffix":"%25"
},
"categories":[{
"category":[
{ "label":"2001" },
{ "label":"2002" },
{ "label":"2003" },
{ "label":"2004" },
{ "label":"2005" }
]
}
],
"dataset":[{
"dataset":[{
"seriesname":"Product A",
"color":"AFD8F8",
"showvalues":"0",
"data":[
{ "value":"30" },
{ "value":"26" },
{ "value":"29" },
{ "value":"31" },
{ "value":"34" }
]
},
{
"seriesname":"Product B",
"color":"F6BD0F",
"showvalues":"0",
"data":[
{ "value":"21" },
{ "value":"28" },
{ "value":"39" },
{ "value":"41" },
{ "value":"24" }
]
}
]
},
{
"dataset":[{
"seriesname":"Service A",
"color":"8BBA00",
"showvalues":"0",
"data":[
{ "value":"27" },
{ "value":"25" },
{ "value":"28" },
{ "value":"26" },
{ "value":"10" }
]
},
{
"seriesname":"Service B",
"color":"A66EDD",
"showvalues":"0",
"data":[
{ "value":"17" },
{ "value":"15" },
{ "value":"18" },
{ "value":"16" },
{ "value":"10" }
]
},
{
"seriesname":"Service C",
"color":"F984A1",
"showvalues":"0",
"data":[
{ "value":"12" },
{ "value":"17" },
{ "value":"16" },
{ "value":"15" },
{ "value":"12" }
]
}
]
}
],
<strong>"lineset":</strong>{
"seriesname":"Cost as % of Revenue",
"showvalues":"0",
"linethickness":"4",
"data":[
{ "value":"57" },
{ "value":"68" },
{ "value":"79" },
{ "value":"73" },
{ "value":"80" }
]
}
}</pre><br />
</td>
</tr>
<tr>
<td valign="top" class="header">Brief Explanation</td>
</tr>
<tr>
<td valign="top" class="text">
<p>The JSON structure of multi-series Stacked Column 2D Line Dual Y Combination Charts is similar to that of a multi-series Stacked Column 2D Chart with the addition of <span class="codeInline">lineset</span> element. There can be multiple <span class="codeInline">lineset</span> elements per chart, each indicating a series of line to be plotted over column chart.</p>
<p>Also, since this chart has dual y-axis, you will need to configure the titles, limits, number formatting, and prefix/suffix for each axis separately. </p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Scatter & Bubble chart JSON|ScatterBubble.html","Zoom Line chart JSON|ZoomLine.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>