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:
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:
- Installing FusionCharts Suite XT for your application
- 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
- Including the FusionCharts Suite XT JavaScript library in your HTML page
- Creating a container
<div>for the chart - Using the new
FusionCharts()constructor to create the chart instance, and then calling therender()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
FusionChartsobject in themultiseriesChartvariable. Each chart or gauge in your HTML page needs to have a separate variable.Here the instance we created was of the
mscolumn2dchart type. The initialization code is wrapped withinFusionCharts.readymethod. 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
widthandheightproperty of the constructor.To specify the data format as JSON, we set the
dataFormatparameter tojson.The actual JSON data is embedded as string as value of
dataSourceparameter. Thechartobject 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 thedatasetarray, with name of the series asseriesname. The data itself is present within thedataarray, with revenue as the key asvalue.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 likeocean,zuneandcarbonor create your own.Finally we called the
rendermethod 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.jswas loaded. Check if the path tofusioncharts.jsfile 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.