In MultiSeriesChart.html, we have changed the SWF file from Column3D.swf to MSColumn3D.swf to render a multi-series chart. FusionCharts uses separate SWF files to plot charts with single series of data (single-series) and those with more than one (multi-series). Names of SWFs that plot multiple series start with a prefix of MS. We have also pointed XML URL to the newly created MSData.xml, which contains data in multi-series format for this chart, in the setXMLUrl() method. These are the only changes required in the web page.

The bulk of changes are in the XML data file to adapt it to the multi-series format. Let us review them. The multi-series chart XML begins with the<chart> element, similar to single-series and all the other charts in FusionCharts. You can provide attributes for the<chart> element to configure the functional and cosmetic properties of the chart. In this example, building on top of our earlier single-series chart, we have introduced a new attribute rotateValues='1', that rotates the data values on the chart to accommodate more numbers. The other attributes remain the same.

Next, we have the<categories> element that is applicable when you are plotting multi-series charts only. Each child<category> element of the<categories> element represents an x-axis label (also called the data point's label). The label attribute of the<category> element lets you specify them as string values. In our chart, we are comparing the segment-wise sales for 2009, 2010, and 2011, and hence have them as x-axis labels.

<categories>
<category label='2009' />
<category label='2010' />
<category label='2011' />
</categories>

All that is now left to be defined is data for both the data series. Each series is represented by a<dataset> element and attributes of this element lets you specify a custom color for the series, and whether to show or hide data values. To define individual data points within a series, children<set> elements are added with a value attribute containing a data point value.

<dataset seriesName='Food Products'>
<set value='892500' />
<set value='1407400' />
<set value='1565000' />
</dataset>

The data point labels or x-axis labels in<category> elements are matched to their respective data point values in the<set> element, based on the order of the definition in XML, that is, the first<category> element provides the label for the first<set> element and so on. To plot a normal chart, the number of<set> elements within each<dataset> should be equal to the number of defined<category> elements.

The previous XML can also be used to plot a stacked chart where columns are placed on top of each other as opposed to side-by-side. The stacked charts are used when the constituents of a data series are relevant along with the sum of all such constituents. While these charts are suited for the comparison of sum, comparison of the constituents against each other is best portrayed by the multi-series chart. To build our stacked chart, we need to change the chart SWF to StackedColumn3D.swf. In the XML, we only make a small change to not rotate the data values by removing the rotateValues='1' attribute from the<chart> element. This results in a chart as shown in the following screenshot:

No. If you have more<category> elements than<set> elements in any data series, FusionCharts fails to find data for those additional<category> elements and plots an empty space on the chart for the missing data points. In contrast, if the number of<set> elements are more than the number of defined<category> elements, FusionCharts ignores them, as these data points do not have respective x-axis labels defined for them, and hence would be without context.

In real-life scenarios, you may have missing or non-existent data within a data series. FusionCharts provides a method for you to specify that. Let us consider an example.

Representing missing or non-existent data on the chart

Let us consider a hypothetical example of building this on top of our last example. What if Harry started selling food products only in 2010, when he added refrigeration capabilities? However, non-food products were still sold in 2009. Hence, we would need to tell FusionCharts that data for food products in 2009 is missing or nonexistent. This can be done by specifying an empty<set/> element as in the following XML:

<chart caption='Harry&apos;s SuperMart' subcaption='Revenue by Year' xAxisName='Year' yAxisName='Amount' numberPrefix='$' rotateValues='1'>
<categories>
<category label='2009' />
<category label='2010' />
<category label='2011' />
</categories>
<dataset seriesName='Food Products'>
<set />
<set value='1407400' />
<set value='1565000' />
</dataset>
<dataset seriesName='Non-Food Products'>
<set value='595000' />
<set value='693200' />
<set value='880400' />
</dataset>
</chart>

This instructs the chart to render an empty space instead of the column representing food-products in 2009, to indicate missing or non-existent data. This method of providing missing data is applicable to all charts in FusionCharts.

Note

Can missing data be replaced by providing zero values?

You might wonder that if there was no data for 2009, why could we not specify the value as 0. It would mean that Harry's SuperMart was not able to sell any food products in 2009, as opposed to the fact that it did not stock food products then. Both have different meanings and need to be visualized accordingly.

Now that you have an understanding of how to plot multiple series on a chart for comparison, let us consider an extension of multi-series charts—combination charts.