|
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>Combination Chart 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", "Combination chart XML" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Combination Chart XML</td>
</tr>
<tr>
<td valign="top" class="text"><p>Combination charts are helpful when you want
to plot multiple chart types on the same chart, or use two different scales
for two different axes. FusionCharts XT offers two categories of Combination
Charts:</p>
<ol>
<li><strong>Single Y Axis Combination Chart</strong>: In these charts,
there is only one y-axis and all the data sets are plotted against this
axis.</li>
<li><strong>Dual Y Axis Combination Chart</strong>: In these charts, there
are two y-axes, which can represent different scales (for example, revenue
and quantity or visits and downloads, etc.). The axis on the left of
the chart is called primary axis and the one on right is called secondary
axis (though, you can reverse this in few charts by configuring the same in the XML). </li>
</ol>
<p>FusionCharts XT has both 2D and 3D combination charts. Shown
below is a 2D Single Y Combination Chart.</p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../ChartSS/Images/Combi_2D.jpg" width="604" height="354" /></td>
</tr>
<tr>
<td valign="top" class="text"><p><a name="single"></a>In the above chart, all the data-series are
plotted against the same (primary) y-axis. Each dataset has an attribute
<span class="codeInline">renderAs </span>that specifies whether the series has to be rendered as column, line or area. </p>
<p>The XML for the above chart looks as under:</p></td>
</tr>
<tr>
<td valign="top" class="text"><pre class="prettyprint code_container"><chart caption='Business Results 2005 v 2006' xAxisName='Month' yAxisName='Revenue' showValues='0' numberPrefix='$'>
<br> <categories><br> <category label='Jan' /><br> <category label='Feb' /><br> <category label='Mar' />
<category label='Apr' /><br> <category label='May' /><br> <category label='Jun' /><br> <category label='Jul' />
<category label='Aug' /><br> <category label='Sep' /><br> <category label='Oct' /><br> <category label='Nov' />
<category label='Dec' /><br> </categories><br> <br> <dataset seriesName='2006'><br> <set value='27400' /><br> <set value='29800' />
<set value='25800' /><br> <set value='26800' /><br> <set value='29600' /><br> <set value='32600' />
<set value='31800' /><br> <set value='36700' /><br> <set value='29700' /><br> <set value='31900' />
<set value='34800' /><br> <set value='24800' /><br> </dataset><br> <br> <dataset seriesName='2005' renderAs='Area'><br> <set value='10000' /><br> <set value='11500' />
<set value='12500' /><br> <set value='15000' /><br> <set value='11000' /><br> <set value='9800' />
<set value='11800' /><br> <set value='19700' /><br> <set value='21700' /><br> <set value='21900' />
<set value='22900' /><br> <set value='20800' /><br> </dataset><br> <br> <dataset seriesName='2004' renderAs='Line'><br> <set value='7000' /><br> <set value='10500' />
<set value='9500' /><br> <set value='10000' /><br> <set value='9000' /><br> <set value='8800' />
<set value='9800' /><br> <set value='15700' /><br> <set value='16700' /><br> <set value='14900' />
<set value='12900' /><br> <set value='8800' /><br> </dataset><br> <br> <trendlines>
<line startValue='22000' color='91C728' displayValue='Target' showOnTop='1'/><br> </trendlines>
<br> <styles><br> <definition>
<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' /><br> </definition>
<br> <application><br> <apply toObject='Canvas' styles='CanvasAnim' /><br> </application> <br> </styles><br> <br> </chart></pre></td>
</tr>
<tr>
<td valign="top" class="text"><p>An example of a 2D Dual Y Combination Chart looks as under:</p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../ChartSS/Images/Combi_DY_CP_AS.jpg" width="598" height="397" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see in the image above, we are plotting
a monthly sales and quantity chart. On the x-axis, we have the month names.
Now, we have two y-axes in this chart:</p>
<ul>
<li>The primary y-axis (left) representing the Revenue figure. The columns
in this chart are plotted against the primary y-axis. </li>
<li>The secondary y-axis (right) representing the Quantity figure. The
area dataset on this chart adheres to the secondary axis. </li>
</ul>
<p>For Dual Y Axis combination charts, it is necessary to provide at least
two datasets - one for the primary axis and the other for the secondary
axis. If you do not provide this, the chart will not render properly. </p>
<p>The XML for the above Dual Y Axis chart looks as under:</p></td>
</tr>
<tr>
<td valign="top" class="text"> <pre class="prettyprint code_container"><chart caption='Sales Volume' PYAxisName='Revenue' SYAxisName='Quantity' showvalues='0' numberPrefix='$' areaOverColumns='0'><br> <br> <categories>
<category label='Jan' /><br> <category label='Feb' /><br> <category label='Mar' /><br> <category label='Apr' />
<category label='May' /><br> <category label='Jun' /><br> <category label='Jul' /><br> <category label='Aug' />
<category label='Sep' /><br> <category label='Oct' /><br> <category label='Nov' /><br> <category label='Dec' />
</categories>
<br> <dataset seriesName='Revenue' parentYAxis='P'><br> <set value='1700000' /><br> <set value='610000' /><br> <set value='1420000' />
<set value='1350000' /><br> <set value='2140000' /><br> <set value='1210000' /><br> <set value='1130000' />
<set value='1560000' /><br> <set value='2120000' /><br> <set value='900000' /><br> <set value='1320000' />
<set value='1010000' /><br> </dataset>
<br> <dataset seriesName='Quantity' parentYAxis='S' renderAs='Area'>
<set value='340' /><br> <set value='120' /><br> <set value='280' /><br> <set value='270' />
<set value='430' /><br> <set value='240' /><br> <set value='230' /><br> <set value='310' />
<set value='430' /><br> <set value='180' /><br> <set value='260' /><br> <set value='200' />
</dataset><br> <br> <trendLines>
<line startValue='2100000' color='009933' displayvalue='Target' /> <br> </trendLines>
<br> <styles><br> <br> <definition>
<style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' /><br> </definition><br> <br> <application><br> <apply toObject='Canvas' styles='CanvasAnim' /><br> </application> <br> <br> </styles>
<br> </chart></pre></td>
</tr>
<tr><td> </td></tr>
<tr>
<td valign="top" class="header">Brief Explanation</td>
</tr>
<tr>
<td valign="top" class="text"><p>The XML structure for a combination chart is
very similar to that of <a href="MultiSeries.html">multi-series chart</a>. So, we will not be discussing it
all over again. Rather we'll discuss the differences between them.</p> </td>
</tr>
<tr>
<td valign="top" class="header">Single Y Axis Combination Charts</td>
</tr>
<tr>
<td valign="top" class="text"><p>Single Y Axis Combination Charts allow you
to plot multiple datasets as different types of plots (columns, lines
or areas), but against the same y-axis (primary). Since all the datasets
belong to the same primary axis, the number formatting properties do not
change across them. </p>
<p>To select which dataset should be rendered as what plot type, you can use
the <span class="codeInline">renderAs</span> property as under:</p>
<pre class="code_container prettyprint"><dataset seriesName='2005' renderAs='Area'><br />
<dataset seriesName='2004' renderAs='Line'><br />
<dataset seriesName='2003' renderAs='Column'> </pre> </td>
</tr>
<tr>
<td valign="top" class="text"> </td>
</tr>
<tr>
<td valign="top" class="header"><a name='dual' id='dual'></a>Dual Y Axis Combination Charts</td>
</tr>
<tr>
<td valign="top" class="text"> <p>Dual Y Axis Combination Charts have two y-axes. Each y-axis can have its own scale and number formatting
properties. You can also explicitly set the y-axis lower and upper limits for
both the axes.</p>
<p>You choose the axis for each dataset using the <span class="codeInline">parentYAxis</span>
property of the <span class="codeInline"><dataset></span> element. This
attribute can take a value of <span class="codeInline">P</span> or <span class="codeInline">S</span>. <span class="codeInline">P</span> denotes primary axis and <span class="codeInline">S</span> denotes
secondary axis. Like, in our above example, we have the revenue dataset
set on primary axis:</p>
<pre class="code_container prettyprint"><dataset seriesName='Revenue' parentYAxis='P'></pre>
<p>
and the Quantity dataset set on secondary axis:</p>
<pre class="code_container prettyprint"><dataset seriesName='Quantity' parentYAxis='S'></pre>
<p class="highlightBlock">In Dual Y 3D Combination Charts, the column chart
by default plots on the primary axis and lines on the secondary. To switch this, you can use <span class="codeInline"><chart primaryAxisOnLeft='0' ...></span>. You can have
more than one primary or secondary datasets but at least one of each is
required.</p>
<p>Each trend-line also needs to be associated with an axis, against which
it will be plotted. Example:</p>
<pre class="code_container prettyprint"><trendLines>
<line parentYAxis='S' or 'P' ... startValue='324' .../> <br /></trendLines> </pre>
<p>By default, they conform to the primary axis.</p> </td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Multi Series chart XML|MultiSeries.html","Scatter & Bubble chart XML|ScatterBubble.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>