Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Combination charts are similar to multi-series charts, they allow you to plot multiple datasets on the same chart. But an added advantage with using combination charts is that you can also plot multiple chart types on the same chart. For example, you can show the column, line, and area chart on the same chart canvas.

Combination charts can be rendered in either 2D or 3D, can have single or dual y-axes, and can be stacked or multi series in nature.

The combination charts available in the FusionCharts Suite XT are:

  • 2D Single Y Combination (Combi 2D)

  • 3D Single Y Combination (Combi 3D)

  • 2D Dual Y Combination (Combi DY2D)

  • Column 3D + Line Single Y

  • Column 3D + Line Dual Y

  • Stacked Column 2D Line Single Y

  • Stacked Column 3D Line Single Y

  • Stacked Column 3D Line Dual Y

  • Multi Series Stacked Column 2D + Line Dual Y

In this section, you will be shown a how you can create combination charts.

Creating a 2D Single Y Combination Chart(Combi 2D)

A 2D combination chart with a single y-axis looks like this:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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"
                }
            ]
        }
    ]
}
<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: 'mscombi2d',
    renderAt: 'chart-container',
    width: '550',
    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"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above chart, we have compared the actual revenue, the projected revenue and the profit earned for each month of the last year. All three metrics have been plotted using different chart types - the actual revenue earned is plotted using a column chart, the projected revenue is plotted using a line chart, and the profit earned is plotted using an area chart.

Using a different chart type for each metric ensures easy interpretation of the data being shown.

Creating a 2D Dual Y Combination (Combi DY2D)

A 2D combination chart with dual y-axis looks like this:

FusionCharts will load here..
{ "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" } ] } ] }
{
    "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"
                }
            ]
        }
    ]
}
<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: '550',
    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"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above chart, we have shown a comparison between the revenue, profit, and the profit percentage. The revenue and the profit will be shown as amount in dollars but the profit percentage will require a different unit - percentage. These cannot be plotted on a single y-axis. FusionCharts Suite XT allows you to have two y-axes, a primary y-axis and a secondary y-axis, if you have two data of two different numeric units to plot.

Therefore, we’ve plotted the amount in USD on the primary y-axis (the one on the left) and the profit % on the secondary y-axis (the one on the right).

Brief Explanation

In the JSON data, the attributes and their corresponding values are written in the following key-value pair format:

"<attributeName>": "<value>"

Given below is a brief description of the data structure needed to render a combination chart:

Attribute Name Description

type

It is used to specify the type of chart you want to render. For example, to render a column 2D chart, the value for this attribute will be column2d.

renderAt

It is used to specify the container object where the chart will be rendered.

width

It is used to specify the width of the chart.

height

It is used to specify the height of the chart.

dataFormat

It is used to specify the type of data that will passed to the chart object. This attribute takes two values: json, where the JSON data to render the chart is passed to the dataSource attribute, and jsonurl, where the relative path to a .json file is passed to the dataSource attribute.

dataSource

It specifies the source from where the data will be fetched, depending on the value passed to the dataFormat attribute.

caption

It is used to specify the chart caption. This attribute belongs to the chart object.

subCaption

It is used to specify the chart sub-caption. This attribute belongs to the chart object.

xAxisName

It is used to specify the name for the x-axis.

yAxisName

It is used to specify the name for the y-axis.

pYAxisName

It is used to specify the name for the primary y-axis. This attribute is used in place of the yAxisName attribute, if you are plotting a dual y-axis chart.

sYAxisName

It is used to specify the name for the secondary y-axis. This attribute is used with the pYAxisName attribute, in place of the yAxisName attribute, if you are plotting a dual y-axis chart.

numberPrefix

It is used to specify the character that will precede all numeric values on the chart, e.g. $ for the currency symbol. If you are plotting a dual y-axis chart, this attribute is used to specify the prefix for the primary y-axis values.

sNumberSuffix

It is used to specify the suffix character for the secondary y-axis values.

sYAxisMaxValue

It is used to specify the upper limit (maximum value) for the secondary y-axis.

theme

It is used to specify the theme for the chart.

label

It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the category object, which in turn belongs to the categories object.

value

It is used to specify the value for a data item. This attribute belongs to the data object, which in turn belongs to the dataset object. The dataset object is an object array that can be used to make multiple datasets.

seriesName

It is used to specify a name for the dataset. This name is shown in the legend box rendered below the chart. This attribute belongs to the dataset object. The dataset object is an object array that can be used to make multiple datasets.

renderAs

It is used to specify the chart type that will be used to render a dataset. This attribute belongs to the dataset object.

By default all datasets are rendered using column charts, unless the renderAs attribute has been explicitly defined.

showValues

It is used to specify whether the data values corresponding to each data plot will be shown on the chart. Setting this attribute to 0 will hide the values, setting it to 1 (default) will show them.

Top