Creating your First Multi-Series & Stacked Charts

In our previous example, we have seen how to create a chart using single series of data. We might want to compare the sales data for two different products. The comparison can be achieved using a Multi-Series chart which can accept multiple sets of data. Here, we will see how to build a simple Multi-Series 3D column chart comparing the "Weekly Sales Summary" for two products. Once completed, the chart will look as under:

Follow the steps below to create a Multi-series chart:

Create a folder LearningFusionCharts on your hard-drive. We will use this folder as the root folder for building all FusionCharts XT examples.
Create a folder named MyFirstChart inside the above folder. Inside the MyFirstChart folder, create a folder named FusionCharts.
Copy MSColumn3D.swf from Download Pack > Charts folder to the FusionCharts folder
Copy FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Charts.js, and jquery.min.js files from Download Pack > Charts folder to the FusionCharts folder

Create an XML file in MyFirstChart folder with name MSData.xml. The data used to show the comparison of Weekly sales for two products is given below in the table:

Week	Product A	Product B
Week 1	$14,400	$12,000
Week 2	$19,600	$15,000
Week 3	$24,000	$20,000
Week 4	$15,700	$11,000

Create the code given below, which is the XML-lized form of the sales data shown in the table (above). Copy the XML code to MSData.xml file. To know how the XML data for Multi-Series Charts is formatted please read Multi-Series Chart XML

<chart caption='Weekly Sales Summary for two Products' xAxisName='Weeks' yAxisName='Amount' numberPrefix='$'> 

   <categories>
      <category Label="Week1"/>
      <category Label="Week2"/>
      <category Label="Week3"/>
      <category Label="Week4"/>
   </categories>

   <dataset seriesName="Product A">
       <set  value='14400' /> 
       <set  value='19600' /> 
       <set  value='24000' /> 
       <set  value='15700' /> 
   </dataset>
   <dataset seriesName="Product B"> 
       <set  value='12000' /> 
       <set  value='15000' /> 
       <set  value='20000' /> 
       <set  value='11000' /> 
   </dataset>
</chart>

Note that you can also provide chart data in JSON format. View an example of JSON data here. Or, to learn more about FusionCharts XT JSON data format, please go through FusionCharts XT data formats > JSON section.

Create an HTML file ms-weekly-sales.html in the same folder and copy-paste the code given below:

<html>
  <head> 	
    <title>My First chart using FusionCharts</title> 	
    <script type="text/javascript" src="FusionCharts/FusionCharts.js">
    </script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myChart = new FusionCharts( "FusionCharts/MSColumn3D.swf", 
      "myChartId", "400", "300", "0" );
      myChart.setXMLUrl("MSData.xml");
      myChart.render("chartContainer");
      
    // -->     
    </script> 	   
  </body> 
</html>

Open the file ms-weekly-sales.html in a Web browser and you will see an animated Multi-Series Column 3D chart similar to the one below:

See it live!

Code examples discussed in this section are present in Download Package > Code > MyFirstChart folder.

If you want to group the data into cumulative stacks, you will just need to change the chart type to Stacked Column chart. The HTML file for a Stacked Column chart will look as under:

<html>
  <head> 	
    <title>My First chart using FusionCharts</title> 	
    <script type="text/javascript" src="FusionCharts/FusionCharts.js">
    </script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!-- 	

     var myChart = new FusionCharts( "FusionCharts/StackedColumn3D.swf", 
      "myChartId", "400", "300", "0" );
      myChart.setXMLUrl("MSData.xml");
      myChart.render("chartContainer");
      
    // -->     
    </script> 	   
  </body> 
</html>

The modified HTML file can be found in Download Package > Code > MyFirstChart > stacked-weekly-sales.html.

In the above code, we have only changed the name of the SWF file from MSColumn3D.swf to StackedColumn3D.swf (please copy StackedColumn3D.swf file from Charts folder of the Download Pack). Open the HTML file in a Web browser. The chart will look like as under:

See it live!

What happens if Flash player is not available?

In case Flash Player is not available on certain devices (like iPad and iPhone), FusionCharts JavaScript library automatically renders the same chart using JavaScript. If you are running the sample from local file system, please note that you will need to provide the data using Data String method, that is, passing the data (XML/JSON) to the chart as String or JSON Object. Many browsers restrict JavaScript from accessing local file system owing to security reasons. In the above example, since you had provided data as a URL, the JavaScript charts will not be able to access the same, when running locally. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as string (using the Data String method), it works fine.

If for any reason, you do not see a chart, run through the following checks:

If you see an endless loading progress bar in your browser, or if the right click menu (right click at the place where the chart is supposed to be) shows "Movie not loaded", check the following:

Whether you pasted the chart SWF files in FusionCharts folder of MyFirstChart folder?
Whether you provided the SWF path properly in your HTML page?
Do you have Adobe Flash Player 8 (or above) installed for this browser?
Whether you enabled your browser to show Active X and Plugin controls? Normally, all browsers are Flash-enabled, but sometimes security settings can disable execution of Active X and Plugin controls.

If you get an "Error in Loading Data" message, check the following:

Whether XML file is in the same folder as the HTML file?
Whether XML file is named as Data.xml and not Data.xml.txt? (as many basic text editors append .txt after the file name)

If you get an "Invalid XML Data" message, it means that the XML data document is malformed. Check it again for common errors like:

Difference in case of tags. <chart> should end with </chart> and not </Chart> or </CHART>
Missing opening/closing quotation marks for any attributes, for example, <chart caption=Weekly Sales Summary' should be <chart caption='Weekly Sales Summary'
Missing closing tag for any element.

To check whether your final XML is correct, open it in your browser and you will see the error.

If only the text "FusionCharts XT will load here!" is displayed, check with the following:

Whether you pasted the FusionCharts.js, jquery.min.js , FusionCharts.HC.js and FusionCharts.HC.Charts.js files in FusionCharts folder of MyFirstChart folder?
Whether you included and provided the path of FusionCharts.js properly in your HTML page?
Are there any JavaScript syntax or runtime errors that might have halted the execution of FusionCharts functions?
Whether you have given different names for the chart's JavaScript variable and chart's ID?