|
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>Multi-Series 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", "Multi-Series chart XML" ] ) );
</script>
<!-- breadcrumb ends here -->
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
<tr>
<td class="pageHeader">Multi-Series Chart XML</td>
</tr>
<tr>
<td valign="top" class="text"><p>Multi-series charts are charts where you
compare multiple series of data. </p>
<p>In our previous example, we had
seen how to plot a chart indicating the <span class="codeInline">Monthly Sales Summary</span> for one year.
This data belonged to one particular series, which is for the year say,
2005. Now, if you need to compare the data for two or more years, you will
have to use multi-series charts. Using multi-series charts, you can compare
data for two sor more number of series. </p>
<p>A simple 2D multi-series chart looks
as under:</p></td>
</tr>
<tr>
<td valign="top" class="text"><img src="../../ChartSS/Images/MS_Col2Dchart.jpg" width="604" height="404" /></td>
</tr>
<tr>
<td valign="top" class="text"><p>As you can see above, here we are comparing
data for the year 2006 and 2005.</p>
<p>The XML for this 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> <br> <categories><br> <category label='Jan' /><br> <category label='Feb' /><br> <category label='Mar' /><br> <category label='Apr' /><br> <category label='May' />
<category label='Jun' />
<vLine color='FF5904' thickness='2'/> <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'><br> <set value='10000' />
<set value='11500' /><br> <set value='12500' /><br> <set value='15000' />
<set value='11000' /><br> <set value='9800' /><br> <set value='11800' /><br> <set value='19700' />
<set value='21700' /><br> <set value='21900' /><br> <set value='22900' /><br> <set value='20800' />
</dataset><br> <br> <trendlines>
<line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/><br> </trendlines><br> <br> <styles><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> </styles><br> <br> </chart> </pre><br /></td>
</tr>
<tr>
<td valign="top" class="header">Brief Explanation</td>
</tr>
<tr>
<td valign="top" class="text"> <p>If you have already gone through the <a href="SingleSeries.html">single
series XML structure</a>, you will find notable differences between the two
XML structures. There are the new <span class="codeInline"><category></span>
and <span class="codeInline"><dataset></span> elements and the <span class="codeInline"><set></span>
elements now just contain the <span class="codeInline">value</span> attribute.</p>
<p>However, if you are still unaware of the FusionCharts XML structure, let's
get to the basics first. The <span class="codeInline"><chart></span>
element is the main element of any FusionCharts XML document - it represents
the starting point and the ending point of data. The <span class="codeInline"><chart></span>
element has a number of attributes that help configure the cosmetic and functional properties of the chart.
You can find full list of such attributes in "<span class="codeInline">Chart
XML Sheet</span>" of each chart.</p>
<p>In the most general form, attributes have the following form:<br>
<span class="codeInline">attributeName="Value"<br>
Example, xAxisName="Month"</span> </p>
<p>The attributes can occur in any order and quotes can be single or double
like <span class="codeInline">xAxisName='Month'. </span><span class="text">However,
you need to make sure that a particular attribute occurs only once for
a given element.</span> Duplicate attributes result in XML validation error.</p>
<p>Next to the <span class="codeInline"><chart></span> element is
<span class="codeInline"><categories></span> element and its child
<span class="codeInline"> <category></span> elements. Each <span class="codeInline"><category></span>
element represents a label on the x-axis. The <span class="codeInline"><category></span>
elements need to be defined for all the multi-series charts before you
can define the data. For example, in our chart, the categories are the
month names (Jan, Feb, Mar .... ) as we are plotting a chart to show monthly
sales summary for two consecutive years. </p>
<p>Between the <span class="codeInline"><category></span> elements, we
can have the <span class="codeInline"><vLine></span> element, which
indicate vertical separator lines running along the height and width of the
chart canvas.</p>
<pre class="code_container prettyprint"><vLine color='FF5904' thickness='2'/></pre>
<p>Now, in a multi-series chart, each series of data (that is, each set of
data) needs to be enclosed between a <span class="codeInline"><dataset></span>
element. In our example, we are plotting a chart showing monthly
sales trend for two different years. The first <span class="codeInline">dataset</span> contains data for the year 2006 and the second one for 2005. Depending
on the chart type, there are a number of properties which you can define
for each <span class="codeInline"><dataset></span> element, which
you can see in "<span class="codeInline">Chart XML Sheet</span>" of that chart.</p>
<p>Moving on, each <span class="codeInline"><set></span> element (which
is a child element of the <span class="codeInline"><dataset></span>
element) represents a set of data which is to be plotted on the chart. A typical
<span class="codeInline"> <set></span> element will look like:</p>
<pre class="code_container prettyprint"><set value="27400"/></pre><br />
</td>
</tr>
<tr>
<td valign="top" class="highlightBlock">You should note that the number of
<span class="codeInline"><category></span> elements should be equal
to the number of data rows in each data sets, that is, if you mention twelve
categories (twelve months), the data for both years (2005 and 2006) should
also contain twelve <span class="codeInline"><set> </span>elements
(twelve rows of data). Else, the chart will display empty space at that position. </td>
</tr>
<tr>
<td valign="top" class="text"><p>Next we have the <span class="codeInline"><trendLines></span>
element. Using this function of the chart, you could draw custom lines
on the chart to represent a trend. For example, in our above XML, we have
defined a line at 26000 to represent the Target sales for the period.
</p>
<p>Finally, you have the <span class="codeInline"><styles></span> element
which is new in FusionCharts XT. It helps you apply font, effects and
animations to various objects of the chart. <span class="codeInline">Styles</span>
lends a simple mechanism using which you can easily control the visual
layout of charts. To read more on <span class="codeInline">Styles</span>,
please see <a href="../../Styles/Styles.html"><span class="codeInline">FusionCharts XT Styles</span></a>
section.</p>
</td>
</tr>
</table>
<!-- footer links starts-->
<div id="fcfooter"></div>
<script type="text/javascript">
document.getElementById("fcfooter").innerHTML = addFCFooter("Single Series chart XML|SingleSeries.html","Combination chart XML|Combination.html");
</script>
<!-- footer links ends -->
<script type="text/javascript" language="javascript1.2">//<![CDATA[
<!--
highlightSearch();
//-->
//]]></script>
</body>
</html>