Multi-series charts are charts where you compare multiple series of data. In the previous example we had seen how to plot a chart to display Monthly sales summary for 1 year. Now, if you want to compare the data for 2 or more years, you have to use a multi-series chart. Using multi-series charts, you can compare data for 2 or more number of series. A simple 2D multi-series chart looks similar to the one shown below: |
Note: The XML structure is generic for all subcategories of multi-series charts, i.e. Stacked, Logarithmic, Inverse, and Combination charts. However, some extra attributes are required in Combination (Single Y Axis and Dual Y Axis) charts, which can be added as normal <dataset> attributes. |
![]() |
In the above chart, we are comparing data for the year 2006 and 2005.
The XML for this chart is: |
<chart caption='Business Results 2005
v 2006' xAxisName='Month' yAxisName='Revenue' showValues='0' numberPrefix='$'> <categories> <category label='Jan' /> <category label='Feb' /> <category label='Mar' /> <category label='Apr' /> <category label='May' /> <category label='Jun' /> <vLine color='FF5904' thickness='2'/> <category label='Jul' /> <category label='Aug' /> <category label='Sep' /> <category label='Oct' /> <category label='Nov' /> <category label='Dec' /> </categories> <dataset seriesName='2006'> <set value='27400' /> <set value='29800'/> <set value='25800' /> <set value='26800' /> <set value='29600' /> <set value='32600' /> <set value='31800' /> <set value='36700' /> <set value='29700' /> <set value='31900' /> <set value='34800' /> <set value='24800' /> </dataset> <dataset seriesName='2005'> <set value='10000'/> <set value='11500'/> <set value='12500'/> <set value='15000'/> <set value='11000' /> <set value='9800' /> <set value='11800' /> <set value='19700' /> <set value='21700' /> <set value='21900' /> <set value='22900' /> <set value='20800' /> </dataset> <trendlines> <line startValue='26000' color='91C728' displayValue='Target' showOnTop='1'/> </trendlines> <styles> <definition> <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' /> </definition> <application> <apply toObject='Canvas' styles='CanvasAnim' /> </application> </styles> </chart> |
Brief Explanation |
If you've already gone through the single series XML structure, you'll find notable differences between the two XML structures. The XML contains two new elements <category> and <dataset>. And, the <set> 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 <chart> element is the main element of any FusionCharts XML document. It represents the starting point and the ending point of data. The <chart> element has a number of attributes that help in manipulating the chart. You can find the full list of attributes in "FusionCharts and XML » Chart XML Reference" section of each chart. In the most general form, attributes have the following form: 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 is used only once in a particular element. Next to the <chart> element comes <categories> element which in turn contains <category> elements. Each <category> element represents a label on the x-axis. The <category> 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 display monthly sales summary for two consecutive years. In between <category> elements, we can have <vLine> element, which creates vertical separator lines that run along the height/width of the chart canvas. <vLine color='FF5904' thickness='2'/> Now, in a multi-series chart, each series of data (i.e., each set of data) needs to be enclosed within a <dataset> element. Like in this 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 <dataset> element, which you can see in "Chart XML Sheet" of that chart. Moving on, each <set> element (which is a child element of the <dataset> 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 <set> element would look like: <set value="27400"/> |
You should note that the number of <category> 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 & 2006) should also contain twelve <set> elements (twelve rows of data). |
Next we have <trendLines> element. Using this function of the chart, you can draw custom lines on the chart to represent a trend. For example, in the above XML, we have defined a line at 26000 to represent the Target sales. Finally, there is the <styles> element, which is new in FusionCharts. It helps you apply font, effects, and animations to various objects of the chart. Styles lends a simple mechanism using which, you can easily control the visual layout of charts. To read more on Styles, please see "FusionCharts and XML » Chart Style XML" section. |
Note: FusionCharts internally can accept ONLY XML data to render chart. FusionCharts for Flex component allows Flex developers to provide data as Array, Model or XMLList objects. Though our discussion in this documentation mainly show examples of XML, a Flex developer can always use Array, Model or XMLList objects. To make things easier, we have visually shown how the other data sources need to be structured to provide the same data. |