Configuring Combination Charts
Combination charts allow you to use more than one chart types on same chart canvas to plot your data.
In this section, you will be shown how you can:
Plotting Trend Elements
For a dual y-axis chart, you can plot trend-lines with respect to both, the primary y-axis and the secondary y-axis.
A combination chart rendered with two trend-lines looks like this:
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"numDivLines": "3",
"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"
}
]
}
],
"trendlines": [
{
"line": [
{
"startValue": "18833",
"color": "#0075c2",
"valuePadding": "20",
"displayvalue": "Average{br}Revenue"
},
{
"startValue": "21",
"parentYAxis": "s",
"color": "#f2c500",
"displayvalue": "Average{br}Profit %"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'mscombidy2d',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"numDivLines": "3",
"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"
}]
}],
"trendlines": [{
"line": [{
"startValue": "18833",
"color": "#0075c2",
"valuePadding": "20",
"displayvalue": "Average{br}Revenue"
}, {
"startValue": "21",
"parentYAxis": "s",
"color": "#f2c500",
"displayvalue": "Average{br}Profit %"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>In the above chart, the Average Revenue trend-line has been plotted against the primary y-axis that shows the amount in USD. The Average Profit % trend-line has been plotted against the secondary y-axis that shows the profit %.
Given below is a brief description of the attributes used to render a trend-line/trend-zone:
| Attribute Name | Description |
|---|---|
|
It is used to specify the starting value for the trend-line. This attribute belongs to the |
|
It is used to specify the ending value for the trend-line. It is specified when you want to render a slanted trend-line. This attribute belongs to the |
|
It is used to specify the hex code for the color that will be used to render a trend-line and its associated text. This attribute belongs to the |
|
It is used to specify a string caption to be displayed with the trend-line. This attribute belongs to the If you don’t specify a value for this attribute, by default, it will take the value of the |
|
It is used to specify whether a chart will be rendered with a trend-line or a trend-zone. Setting this attribute to |
|
It is used to specify the empty space to be rendered, pixels, between the top-end of a data plot and the start of its corresponding value text box. |
|
It is used to specify the parent axis of a dataset. This attribute takes two values: |
FusionCharts Suite XT includes several options to customize trend elements. To know more about the trend elements in a single y-axis chart, click here. To know more about the dual y-axis chart, click here.
Formatting Numbers on the Chart
FusionCharts Suite XT includes separate configuration attributes to format numbers for the primary and secondary y-axes. Some of these attributes have been briefly described here.
Given below is a brief description of the number formatting attributes for the primary y-axis:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the numbers displayed on the chart will be formatted using commas. Setting this attribute to |
|
It is used to specify whether a |
|
It is used to specify the default unit for the numbers rendered on the chart. |
|
It is used to specify the unit for a block of the scale. |
|
It is used to specify the range of the various blocks that constitute the scale. |
|
It is used to specify whether recursive scaling will be enabled for the chart. |
|
It is used to specify the character that will precede all numeric values on the chart, e.g. |
|
It is used to specify the character that will be appended to all numeric values on the chart, e.g. |
The above attributes are applicable to the primary y-axis. To use these attributes for the secondary y-axis, precede the attribute name with an s. For example, numberPrefix becomes sNumberPrefix.
Few of important number formatting attributes for secondary y-axis
| Attribute Name | Description |
|---|---|
|
This configuration determines whether the numbers belonging to secondary axis will be formatted using commas, e.g., 40,000 if |
|
Configuration whether to add K (thousands) and M (millions) to a number belonging to secondary axis after truncating and rounding it - e.g., if |
|
The default unit of the numbers belonging to secondary axis. |
|
Unit of each block of the scale of secondary y-axis. |
|
Range of the various blocks that constitute the scale for secondary y-axis. |
|
To scale the numbers recursively only for the secondary y-axis you need to set this attribute to ‘1’. |
|
Using this attribute, you could add prefix to all the numbers belonging to secondary axis. |
|
Using this attribute, you could add prefix to all the numbers belonging to secondary axis. |
For the complete list of number formatting attributes available for both the axes, refer to the number formatting section here.
Placing the Secondary Axis on the Left
You can choose to swap positions of the primary and secondary axes.
A combination chart rendered with the positions of the axes swapped looks like this:
{
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"primaryAxisOnLeft": "0",
"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"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'mscombidy2d',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenues and Profits",
"subCaption": "For last year",
"xAxisname": "Month",
"pYAxisName": "Amount (In USD)",
"sYAxisName": "Profit %",
"numberPrefix": "$",
"sNumberSuffix": "%",
"sYAxisMaxValue": "50",
"primaryAxisOnLeft": "0",
"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"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attribute used to swap axis positions:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the primary axis and secondary axis positions should be swapped. Setting this attribute to |