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: |
Note that this XML structure is generic for all Multi-series subcategories, 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. |
![]() |
As you can see above, here we are comparing data for the year 2006 and 2005.
The XML for this chart looks as under: |
<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. There is the new <category> and <dataset> elements 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 which helps to manipulate the chart. You can find the full list of attributes in "Chart XML Sheet" 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 occurs only once for a given element. Next to the <chart> element is <categories> element and its child <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 show monthly sales summary for two consecutive years. Between <category> elements, we can have <vLine> element, which indicate vertical separator lines running 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 between a <dataset> 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 <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 the <trendLines> 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. Finally, you've <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 Styles XML" section. |
Please note that FusionCharts internally can accept ONLY XML data to render chart. FusionCharts for Flex component allow Flex developers to provide data as Array, Model or XMLList object. Though our discussions in this Documentation mainly show examples in XML, a Flex developers can always use Array, Model or XMLList objects. To make the thing easier, we have visually shown how the other data sources need to be structured to provide the same data. |