Tiny File Manager

Back Back Up Advanced Editor

<?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>FusionCharts Free Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
 <tr> 
 <td><h2 class="pageHeader">Multi-Series Chart XML</h2></td>
 </tr>
 <tr> 
 <td valign="top" class="text">Multi-series charts are charts where you 
 compare multiple series of data. Like, in our previous example we had 
 seen how to plot a chart indicating Monthly sales summary for 1 year. 
 This data belonged to one particular series, that is for the year say, 
 2005. Now, if you need to compare the data for 2 or more years, you'll 
 have to use multi-series charts. Using multi-series charts, you can compare 
 data for 2 or more number of series. A simple 2D multi-series chart looks 
 as under:</td>
 </tr>
 <tr> 
 <td valign="top" class="text"><img src="ChartSS/Images/MS_Col2D.jpg" /></td>
 </tr>
 <tr> 
 <td valign="top" class="text">As you can see above, here we are comparing 
 data for the year 2006 and 2005. 
 The XML for this chart looks as under:</td>
 </tr>
 <tr> 
 <td valign="top" class="codeBlock">&lt;graph caption='Business Results 2005 v 2006' xAxisName='Month' yAxisName='Revenue' 
 &nbsp;&nbsp;showValues='0' numberPrefix='$' decimalPrecision='0' bgcolor='F3f3f3' bgAlpha='70' 
 &nbsp;&nbsp;showColumnShadow='1' divlinecolor='c5c5c5' divLineAlpha='60' showAlternateHGridColor='1' 
	 &nbsp;&nbsp;alternateHGridColor='f8f8f8' alternateHGridAlpha='60' &gt; 
 &nbsp;&nbsp;&lt;categories&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Jan' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Feb' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Mar' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Apr' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='May' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Jun' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Jul' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Aug' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Sep' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Oct' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Nov' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;category name='Dec' /&gt; 
 &nbsp;&nbsp;&lt;/categories&gt; 
 &nbsp;&nbsp;&lt;dataset seriesName='2006' color='c4e3f7' &gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='27400' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='29800' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='25800' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='26800' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='29600' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='32600' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='31800' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='36700' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='29700' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='31900' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='34800' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='24800' /&gt; 
 &nbsp;&nbsp;&lt;/dataset&gt; 
 &nbsp;&nbsp;&lt;dataset seriesName='2005' color='Fad35e' &gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='10000'/&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='11500'/&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='12500'/&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='15000'/&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='11000' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='9800' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='11800' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='19700' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='21700' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='21900' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='22900' /&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;set value='20800' /&gt; 
 &nbsp;&nbsp;&lt;/dataset&gt; 
 &nbsp;&nbsp;&lt;trendlines&gt; 
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/&gt; 
 &nbsp;&nbsp;&lt;/trendlines&gt; 
 &lt;/graph&gt;</td>
 </tr>
 <tr> 
 <td valign="top" class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td valign="top" class="header">Brief Explanation</td>
 </tr>
 <tr> 
 <td valign="top" class="text"> If you've already gone through the single 
 series XML structure, you'll find notable differences between the two 
 XML structures. There is the new &lt;category&gt; 
 and &lt;dataset&gt; elements and the &lt;set&gt; 
 elements now just contain the value attribute.
 However, if you're still unaware of the FusionCharts XML structure, let's 
 get to the basics first. The &lt;graph&gt; 
 element is the main element of any FusionCharts XML document - it represents 
 the starting point and the ending point of data. The &lt;graph&gt; 
 element has a number of attributes which helps to manipulate the chart. 
 You can find the full list of attributes in &quot;Chart 
 XML Reference&quot; of each chart.
 In the most general form, attributes have the following form: 
 attributeName = &quot;Value&quot; 
 e.g., xAxisName=&quot;Month&quot; 
 The attributes can occur in any order and quotes can be single or double 
 like xAxisName='Month'. However, 
 you need to make sure that a particular attribute occurs only once for 
 a given element.
 Next to the &lt;graph&gt; element is 
 &lt;categories&gt; element and its child 
 &lt;category&gt; elements. Each &lt;category&gt; 
 element represents a name on the x-axis. The &lt;category&gt; 
 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're plotting a chart to show monthly 
 sales summary for two consecutive years. 
 Now, in a multi-series chart, each series of data (i.e., each set of 
 data) needs to be enclosed between a &lt;dataset&gt; 
 element. Like in our example, we're plotting a chart showing the monthly 
 sales trend for 2 different years - the first dataset element's childnodes 
 would be the 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 &lt;dataset&gt; element, which 
 you can see in &quot;Chart XML Reference&quot; of that chart.
 Moving on, each &lt;set&gt; element (which 
 is a child element of the &lt;dataset&gt; 
 element) represents a set of data which is to be plotted on the graph 
 and determines a set of data which would appear on the graph. A typical 
 &lt;set&gt; element would look like:
 &lt;set value=&quot;27400&quot;/&gt;
 </td>
 </tr>
 <tr>
 <td valign="top" class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td valign="top" class="highlightBlock">You should note that the number of 
 &lt;category&gt; elements should be equal 
 to the number of data rows in each data sets, i.e., if you mention twelve 
 categories (twelve months), the data for both years (2005 &amp; 2006) should 
 also contain twelve &lt;set&gt; elements 
 (twelve rows of data).</td>
 </tr>
 <tr> 
 <td valign="top" class="text">&nbsp;</td>
 </tr>
 <tr> 
 <td valign="top" class="text">Next we have the &lt;trendLines&gt; 
 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. 
 
 </td>
 </tr>
</table>
</body>
</html>