Loading
Combination Charts
Harry is considering international expansion and needs to present his investors statistics that are strong enough to convince them to invest in his plans. Among the several reports he has to present to his investors, one report includes comparing the revenue earned last year with the projected revenue and the profits earned.
He wants to have the following data series rendered on the same chart:
- Revenue earned- projected as a column chart
- Revenue projected - projected as a line chart
- Profit earned - projected as an area chart
To plot these three distinct data series on the same chart, but each one rendered as a different chart type, we need to use a special type of chart called combination chart. Combination charts let you plot multiple datasets on the same chart, where each dataset can have a different unit and/or magnitude. There are two kinds of combination charts:
-
Single Y-axis Combination Charts - In this type of combination chart, there can be multiple data series, but all series plots against the same axis (primary axis), and hence have the same unit. For example, for the current chart we need to make for Harry, all the datasets refer to either revenue or profit, but have the unit as $.
-
Dual Y-Axis Combination Charts - In this type of combination chart, there are two different axis - primary axis and secondary axis, each with a different unit and magnitude. For example, if Harry had to plot revenue vs employees, both data series cannot be plotted on the same axis, and he will need this type of combination chart.
Let’s build the chart that Harry wants on a single y-axis combination chart.
Single Y-axis
The chart where Harry needs to compare actual revenue, projected revenue and profit, would look as under:
The data used in this chart is given here
| Month | Actual Revenue | Projected Revenue | Profit |
|---|---|---|---|
| Jan | $16,000 | $15,000 | $4,000 |
| Feb | $20,000 | $16,000 | $5,000 |
| March | $18,000 | $17,000 | $3,000 |
| April | $19,000 | $18,000 | $4,000 |
| May | $15,000 | $19,000 | $1,000 |
| June | $21,000 | $19,000 | $7,000 |
| July | $16,000 | $20,000 | $1,000 |
| August | $20,000 | $19,000 | $4,000 |
| September | $17,000 | $20,000 | $1,000 |
| October | $25,000 | $21,000 | $8,000 |
| Nov | $19,000 | $22,000 | $2,000 |
| Dec | $23,000 | $23,000 | $7,000 |
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.
{
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subCaption": "Last year",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesName": "Actual Revenue",
"data": [
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "25000"
},
{
"value": "19000"
},
{
"value": "23000"
}
]
},
{
"seriesName": "Projected Revenue",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "15000"
},
{
"value": "16000"
},
{
"value": "17000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "19000"
},
{
"value": "20000"
},
{
"value": "21000"
},
{
"value": "22000"
},
{
"value": "23000"
}
]
},
{
"seriesName": "Profit",
"renderAs": "area",
"showValues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
}
]
}
]
}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.
The HTML code needed to do this would look like:
<html>
<head>
<title>My First Combination 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.
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:
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 revenueCompChart = new FusionCharts({
"type": "mscombi2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subCaption": "Last year",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesName": "Actual Revenue",
"data": [{
"value": "16000"
}, {
"value": "20000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "15000"
}, {
"value": "21000"
}, {
"value": "16000"
}, {
"value": "20000"
}, {
"value": "17000"
}, {
"value": "25000"
}, {
"value": "19000"
}, {
"value": "23000"
}]
}, {
"seriesName": "Projected Revenue",
"renderAs": "line",
"showValues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}]
}, {
"seriesName": "Profit",
"renderAs": "area",
"showValues": "0",
"data": [{
"value": "4000"
}, {
"value": "5000"
}, {
"value": "3000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "7000"
}, {
"value": "1000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "8000"
}, {
"value": "2000"
}, {
"value": "7000"
}]
}]
}
});
revenueCompChart.render();
});
</script>In the above code we:
-
Created an instance of
FusionChartsobject in therevenueCompChartvariable. Each chart or gauge in your HTML page needs to have a separate variable. 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 created an instance of
mscombi2dchart. Each chart type in FusionCharts Suite XT has a unique alias, using which you can create instance of that chart. -
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 to json. -
Next we used a theme to manage the cosmetic properties of the chart. In this example we used the FusionCharts Internal Theme (
fint). You can choose one of the predefined themes that are shipped with FusionCharts Suite XT likeocean,zuneandcarbonor create your own. -
The actual JSON data is embedded as string as value of
dataSourceparameter. Thechartobject contains a list of key-value pairs that let you configure the functional and cosmetic attributes of your chart. Each category is contained in thecategoriesarray withlabelas key. Each of the series of the data is present within thedatasetarray, with name of the series asseriesname. The data itself is present within thedataarray, with revenue with the key asvalue -
Call the
rendermethod to draw the chart in chart-container<div>element.
The final HTML code needed to create this chart will look like this
<html>
<head>
<title>My First Combination 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 revenueCompChart = new FusionCharts({
"type": "mscombi2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subCaption": "Last year",
"xAxisname": "Month",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesName": "Actual Revenue",
"data": [{
"value": "16000"
}, {
"value": "20000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "15000"
}, {
"value": "21000"
}, {
"value": "16000"
}, {
"value": "20000"
}, {
"value": "17000"
}, {
"value": "25000"
}, {
"value": "19000"
}, {
"value": "23000"
}]
}, {
"seriesName": "Projected Revenue",
"renderAs": "line",
"showValues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}]
}, {
"seriesName": "Profit",
"renderAs": "area",
"showValues": "0",
"data": [{
"value": "4000"
}, {
"value": "5000"
}, {
"value": "3000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "7000"
}, {
"value": "1000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "8000"
}, {
"value": "2000"
}, {
"value": "7000"
}]
}]
}
});
revenueCompChart.render();
});
</script>
</head>
<body>
<div id="chartContainer">A stacked column 2D chart will load here!</div>
</body>
</html>Dual Y-axis
In the previous example, we created a single y-axis combination chart, where all data series could be plotted against the same y-axis (primary y-axis). But what if we had to analyze datasets having different units and magnitude.
Let’s say Harry wants to show the revenue and the profit earned over last year as well as the profit percent. Here, we could use a combination chart with a dual y-axis, using a column 2D chart to show the revenue earned, an area chart to show the profits earned, and a line chart to show the profit percent.
Here we need the primary y-axis to represent the amount in $and the secondary y-axis to represent the percent values for profit.
A chart that can help Harry in this situation will look like this
The data for this chart looks as under, in a tabular format:
| Month | Actual Revenue | Profit% | Actual Profit |
|---|---|---|---|
| Jan | $16,000 | 25% | $4,000 |
| Feb | $20,000 | 25% | $5,000 |
| March | $18,000 | 16.66% | $3,000 |
| April | 19,000 | 21.05% | $4,000 |
| May | $15,000 | 6.66% | $1,000 |
| June | $21,000 | 33.33% | $7,000 |
| July | $16,000 | 6.25% | $1,000 |
| August | $20,000 | 25% | $4,000 |
| September | $17,000 | 5.88% | $1,000 |
| October | $25,000 | 36.36% | $8,000 |
| Nov | $19,000 | 10.52% | $2,000 |
| Dec | $23,000 | 30.43% | $7,000 |
This data, when converted to FusionCharts JSON/XML format, looks as under:
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Jan"
},
{
"label": "Feb"
},
{
"label": "Mar"
},
{
"label": "Apr"
},
{
"label": "May"
},
{
"label": "Jun"
},
{
"label": "Jul"
},
{
"label": "Aug"
},
{
"label": "Sep"
},
{
"label": "Oct"
},
{
"label": "Nov"
},
{
"label": "Dec"
}
]
}
],
"dataset": [
{
"seriesName": "Revenues",
"data": [
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "18000"
},
{
"value": "19000"
},
{
"value": "15000"
},
{
"value": "21000"
},
{
"value": "16000"
},
{
"value": "20000"
},
{
"value": "17000"
},
{
"value": "22000"
},
{
"value": "19000"
},
{
"value": "23000"
}
]
},
{
"seriesName": "Profits",
"renderAs": "area",
"showValues": "0",
"data": [
{
"value": "4000"
},
{
"value": "5000"
},
{
"value": "3000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "7000"
},
{
"value": "1000"
},
{
"value": "4000"
},
{
"value": "1000"
},
{
"value": "8000"
},
{
"value": "2000"
},
{
"value": "7000"
}
]
},
{
"seriesName": "Profit %",
"parentYAxis": "S",
"renderAs": "line",
"showValues": "0",
"data": [
{
"value": "25"
},
{
"value": "25"
},
{
"value": "16.66"
},
{
"value": "21.05"
},
{
"value": "6.66"
},
{
"value": "33.33"
},
{
"value": "6.25"
},
{
"value": "25"
},
{
"value": "5.88"
},
{
"value": "36.36"
},
{
"value": "10.52"
},
{
"value": "30.43"
}
]
}
]
}As you can see, the data structure for this chart is almost the same as that of single y-axis chart. The only exceptions are:
-
Since there are 2 y-axis now, the
yAxisNameattribute no longer applies, and you need to specifypYAxisNameandsYAxisNameattributes instead. The former lets you specify the title for primary y-axis, and the latter specifies the title for secondary y-axis. -
For each dataset, you now need to specify whether it should plot on primary axis or secondary. This is done using the
"parentYAxis": "S"attribute. It takes a value ofP(primary axis) orS(secondary axis).
The final HTML code to generate this example looks like this:
<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 revenueChart = new FusionCharts({
"type": 'mscombidy2d',
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix" : "%",
"sYAxisMaxValue" : "50",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesName": "Revenues",
"data": [{
"value": "16000"
}, {
"value": "20000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "15000"
}, {
"value": "21000"
}, {
"value": "16000"
}, {
"value": "20000"
}, {
"value": "17000"
}, {
"value": "22000"
}, {
"value": "19000"
}, {
"value": "23000"
}]
}, {
"seriesName": "Profits",
"renderAs": "area",
"showValues": "0",
"data": [{
"value": "4000"
}, {
"value": "5000"
}, {
"value": "3000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "7000"
}, {
"value": "1000"
}, {
"value": "4000"
}, {
"value": "1000"
}, {
"value": "8000"
}, {
"value": "2000"
}, {
"value": "7000"
}]
}, {
"seriesName": "Profit %",
"parentYAxis": "S",
"renderAs": "line",
"showValues": "0",
"data": [{
"value": "25"
}, {
"value": "25"
}, {
"value": "16.66"
}, {
"value": "21.05"
}, {
"value": "6.66"
}, {
"value": "33.33"
}, {
"value": "6.25"
}, {
"value": "25"
}, {
"value": "5.88"
}, {
"value": "36.36"
}, {
"value": "10.52"
}, {
"value": "30.43"
}]
}]
}
});
revenueChart.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.