Multi Series Charts

Now that Harry has a sense of his current year revenues, customer satisfaction score and how each state in US is performing, he wants to take a step further and do a quarter-wise comparison of revenues of previous year with current one. To build this visualization for Harry, we will need a multi-series column chart.

Multi-series charts are useful when you want to analyze data belonging to multiple data sets with a common x-axis and y-axis. Data plots in multi-series charts are rendered in a color specific to the dataset that they belong to, the charts are rendered with a legend box that helps you identify colors and their associated datasets.

The multi-series column 2D chart that we are going to build for Harry will look like this:

FusionCharts should load here..

The data for this chart can be represented in a table as under:

Period Previous Year Current Year
Quarter 1 $10,000 $25,400
Quarter 2 $11,500 $29,800
Quarter 3 $12,500 $21,800
Quarter 4 $15,000 $26,800

Let's Begin

Creating this chart involves the following steps:

  1. Installing FusionCharts Suite XT for your application
  2. Converting your data to a JSON or XML format. FusionCharts Suite XT accepts both data formats, and can read it as a string, or from a file, local or remote
  3. Including the FusionCharts Suite XT JavaScript library in your HTML page
  4. Creating a container <div> for the chart
  5. Using the new FusionCharts() constructor to create the chart instance, and then calling the render() method

Converting your data to FusionCharts Suite XT JSON/XML format

For this example, our dataset, when converted to FusionCharts Suite XT JSON/XML format, looks as under:

...

Including FusionCharts Suite XT in your application

To include the FusionCharts Suite XT JavaScript library in your HTML page, you use the <script> tag as under. Next, we include a theme file to style the chart. The theme is called fint (FusionCharts internal) and it is present in themes folder of your download.

<html>
<head>
<title>My first Multi-Series chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
</head>
</html>

It informs the browser where to load the FusionCharts library from. We recommend using a relative path to the library hosted on the same domain as your web application.

Creating a container for your chart in the web page

Next, you will need to create a container for your chart in the form of a <div> element, as under:

<body>
<div id="chartContainer">A multi-series chart will load here!</div>
</body>

Creating an instance of the chart

The JavaScript code needed to create an instance of this chart would look like:

<script type="text/javascript">
FusionCharts.ready(function () {
    var multiseriesChart = new FusionCharts({
        "type": "mscolumn2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource":  {
           "chart": {
              "caption": "Comparison of Quarterly Revenue",
              "subCaption": "Harry's SuperMart",
              "xAxisname": "Quarter",
              "yAxisName": "Revenues (In USD)",
              "numberPrefix": "$",
              "theme": "fint"
           },
           "categories": [
              {
                 "category": [
                    {
                       "label": "Q1"
                    },
                    {
                       "label": "Q2"
                    },
                    {
                       "label": "Q3"
                    },
                    {
                       "label": "Q4"
                    }
                 ]
              }
           ],
           "dataset": [
              {
                 "seriesname": "Previous Year",
                 "data": [
                    {
                       "value": "10000"
                    },
                    {
                       "value": "11500"
                    },
                    {
                       "value": "12500"
                    },
                    {
                       "value": "15000"
                    }
                 ]
              },
              {
                 "seriesname": "Current Year",
                 "data": [
                    {
                       "value": "25400"
                    },
                    {
                       "value": "29800"
                    },
                    {
                       "value": "21800"
                    },
                    {
                       "value": "26800"
                    }
                 ]
              }
           ]
        }
    });

    multiseriesChart.render();
});
</script>

In the above code, we:

  • Created an instance of FusionCharts object in the multiseriesChart variable. Each chart or gauge in your HTML page needs to have a separate variable.

  • Here the instance we created was of the mscolumn2d chart type. The initialization code is wrapped within FusionCharts.ready method. This safeguards your chart instantiation code from being called before FusionCharts Suite XT library is loaded and is ready to be used on the page.

  • Next, we specified the width and height of chart (in pixels) using width and height property of the constructor.

  • To specify the data format as JSON, we set the dataFormat parameter to json.

  • The actual JSON data is embedded as string as value of dataSource parameter. The chart object contains a list of key-value pairs that lets you configure the functional and cosmetic attributes of your chart. Each series of the data is present within the dataset array, with name of the series as seriesname. The data itself is present within the data array, with revenue as the key as value.

  • Next we used a theme to manage the cosmetic properties of the chart, in this example we used the FusionCharts Suite XT Internal Theme (fint). You can choose one of the predefined themes that are shipped with FusionCharts Suite XT like ocean , zune and carbon or create your own.

  • Finally we called the render method to draw the chart in chart-container <div> element.

There! You have now configured a multi-series column 2D chart to compare the quarterly revenue for Harry's SuperMart for two years.

The legend box indicates the colors used and the year each color represents. You can click on a legend key to show/hide that data series. The multi-series chart uses two different colors to help identify the two years for which the data is being analyzed. The legend box indicates the colors used and the year each color represents.

Here is the full HTML code to generate this example:

<html>
<head>
<title>My First Multi-Series chart</title>
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
FusionCharts.ready(function () {
    var multiseriesChart = new FusionCharts({
        "type": "mscolumn2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
           "chart": {
              "caption": "Comparison of Quarterly Revenue",
              "subCaption": "Harry's SuperMart",
              "xAxisname": "Quarter",
              "yAxisName": "Revenues (In USD)",
              "numberPrefix": "$",
              "theme": "fint"
           },
           "categories": [
              {
                 "category": [
                    {
                       "label": "Q1"
                    },
                    {
                       "label": "Q2"
                    },
                    {
                       "label": "Q3"
                    },
                    {
                       "label": "Q4"
                    }
                 ]
              }
           ],
           "dataset": [
              {
                 "seriesname": "Previous Year",
                 "data": [
                    {
                       "value": "10000"
                    },
                    {
                       "value": "11500"
                    },
                    {
                       "value": "12500"
                    },
                    {
                       "value": "15000"
                    }
                 ]
              },
              {
                 "seriesname": "Current Year",
                 "data": [
                    {
                       "value": "25400"
                    },
                    {
                       "value": "29800"
                    },
                    {
                       "value": "21800"
                    },
                    {
                       "value": "26800"
                    }
                 ]
              }
           ]
        }
    });

    multiseriesChart.render();
});
</script>

</head>
<body>
<div id="chartContainer">A multi-series chart will load here!</div>
</body>
</html>

Was there a problem rendering the chart?

In case something went wrong and you are unable to see the chart, check for the following:

  • If you are getting a JavaScript error on your page, check your browser console for the exact error and fix accordingly.

  • If the chart does not show up at all, but there are no JavaScript errors, check if the FusionCharts Suite XT JavaScript library has loaded correctly. You can use developer tools within your browser to see if fusioncharts.js was loaded. Check if the path to fusioncharts.js file is correct, and whether the file exists in that location.

  • If you get a Loading Data or Error in loading data message, check whether your JSON data structure is correct, and there are no conflicts related to quotation marks in your code.

Click here for more information on Troubleshooting.