Multi-series Charts
These chart types belong to FusionCharts XT.
FusionCharts Suite XT includes multi-series charts that allow to plot data for multiple datasets. For example, you can plot the revenue collected each month for the last two years using a multi-series chart. Multi-series charts allow to plot the highs and lows of multiple datasets while also comparing them.
The different types of multi-series charts available in the FusionCharts Suite XT are:
Multi-series Column 2D Chart
Multi-series Column 3D Chart
Multi-series Bar 2D Chart
Multi-series Bar 3D Chart
Multi-series Line 2D Chart
Multi-series Area 2D Chart
Multi-series Column 2D Chart
In this sample, let's create a multi-series column 2D chart showcasing the comparison between quarterly revenue earned for the previous year and the current year. The columns for both datasets, one for the previous year and one for the current year, have been rendered using different colors. This makes it easy to interpret and compare the data.
To create a multi-series column 2D chart follow the steps given below:
In the JSON data, set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Specify the chart type using the
typeattribute. To render a multi-series column 2D chart, setmscolumn2d.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
For a detailed list of attributes, refer to the chart attributes page of multi-series column 2D chart.
A simple multi-series column 2D chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Comparison of Quarterly Revenue",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "80",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"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"
}
]
}
],
"trendlines": [
{
"line": [
{
"startvalue": "12250",
"color": "#5D62B5",
"displayvalue": "Previous{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Previous year quarterly target : $13.5K"
},
{
"startvalue": "25950",
"color": "#29C3BE",
"displayvalue": "Current{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Current year quarterly target : $23K"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'mscolumn2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Comparison of Quarterly Revenue",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "80",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"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"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "12250",
"color": "#5D62B5",
"displayvalue": "Previous{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Previous year quarterly target : $13.5K"
}, {
"startvalue": "25950",
"color": "#29C3BE",
"displayvalue": "Current{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Current year quarterly target : $23K"
}]
}]
}
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above multi-series chart.
Multi-series Column 3D Chart
To render a multi-series column chart in 3D, change the value of the type attribute from msColumn2D to msColumn3D. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of multi-series column 3D chart.
The multi-series column chart in 3D looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Comparison of Quarterly Revenue",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "80",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"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"
}
]
}
],
"trendlines": [
{
"line": [
{
"startvalue": "12250",
"color": "#5D62B5",
"displayvalue": "Previous{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Previous year quarterly target : $13.5K"
},
{
"startvalue": "25950",
"color": "#29C3BE",
"displayvalue": "Current{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Current year quarterly target : $23K"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'mscolumn3d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Comparison of Quarterly Revenue",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "80",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"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"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "12250",
"color": "#5D62B5",
"displayvalue": "Previous{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Previous year quarterly target : $13.5K"
}, {
"startvalue": "25950",
"color": "#29C3BE",
"displayvalue": "Current{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Current year quarterly target : $23K"
}]
}]
}
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above multi-series chart.
Multi-series Bar 2D Chart
Let's move ahead to create a multi-series bar chart in 2D which will show sales as per two major categories in different stores for last month.
To render a multi-series bar chart in 2D, set the type to msbar2d.
For a detailed list of attributes, refer to the chart attributes page of multi-series bar 2D chart.
A multi-series bar 2D chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Split of Sales by Product Category",
"subCaption": "In top 5 stores last month",
"yAxisname": "Sales (In USD)",
"numberPrefix": "$"
},
"categories": [
{
"category": [
{
"label": "Bakersfield Central"
},
{
"label": "Garden Groove harbour"
},
{
"label": "Los Angeles Topanga"
},
{
"label": "Compton-Rancho Dom"
},
{
"label": "Daly City Serramonte"
}
]
}
],
"dataset": [
{
"seriesname": "Food Products",
"data": [
{
"value": "17000"
},
{
"value": "19500"
},
{
"value": "12500"
},
{
"value": "14500"
},
{
"value": "17500"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [
{
"value": "25400"
},
{
"value": "29800"
},
{
"value": "21800"
},
{
"value": "19500"
},
{
"value": "11500"
}
]
}
],
"trendlines": [
{
"line": [
{
"startvalue": "15000",
"color": "#5D62B5",
"valueOnRight": "1",
"displayvalue": "Avg. for{br}Food"
},
{
"startvalue": "22000",
"color": "#29C3BE",
"valueOnRight": "1",
"displayvalue": "Avg. for{br}Non-food"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'msbar2d',
renderAt: 'chart-container',
width: '600',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Split of Sales by Product Category",
"subCaption": "In top 5 stores last month",
"yAxisname": "Sales (In USD)",
"numberPrefix": "$"
},
"categories": [{
"category": [{
"label": "Bakersfield Central"
},
{
"label": "Garden Groove harbour"
},
{
"label": "Los Angeles Topanga"
},
{
"label": "Compton-Rancho Dom"
},
{
"label": "Daly City Serramonte"
}
]
}],
"dataset": [{
"seriesname": "Food Products",
"data": [{
"value": "17000"
},
{
"value": "19500"
},
{
"value": "12500"
},
{
"value": "14500"
},
{
"value": "17500"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [{
"value": "25400"
},
{
"value": "29800"
},
{
"value": "21800"
},
{
"value": "19500"
},
{
"value": "11500"
}
]
}
],
"trendlines": [{
"line": [{
"startvalue": "15000",
"color": "#5D62B5",
"valueOnRight": "1",
"displayvalue": "Avg. for{br}Food"
},
{
"startvalue": "22000",
"color": "#29C3BE",
"valueOnRight": "1",
"displayvalue": "Avg. for{br}Non-food"
}
]
}]
}
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above multi-series chart.
Multi-series Bar 3D Chart
To render a multi-series bar chart in 3D, change the value of the type attribute from msBar2D to msBar3D. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of multi-series bar 3D chart.
The multi-series bar chart in 3D looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Split of Sales by Product Category",
"subCaption": "In top 5 stores last month",
"yAxisname": "Sales (In USD)",
"numberPrefix": "$"
},
"categories": [
{
"category": [
{
"label": "Bakersfield Central"
},
{
"label": "Garden Groove harbour"
},
{
"label": "Los Angeles Topanga"
},
{
"label": "Compton-Rancho Dom"
},
{
"label": "Daly City Serramonte"
}
]
}
],
"dataset": [
{
"seriesname": "Food Products",
"data": [
{
"value": "17000"
},
{
"value": "19500"
},
{
"value": "12500"
},
{
"value": "14500"
},
{
"value": "17500"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [
{
"value": "25400"
},
{
"value": "29800"
},
{
"value": "21800"
},
{
"value": "19500"
},
{
"value": "11500"
}
]
}
],
"trendlines": [
{
"line": [
{
"startvalue": "15000",
"color": "#5D62B5",
"valueOnRight": "1",
"displayvalue": "Avg. for{br}Food"
},
{
"startvalue": "22000",
"color": "#29C3BE",
"valueOnRight": "1",
"displayvalue": "Avg. for{br}Non-food"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'msbar3d',
renderAt: 'chart-container',
width: '600',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Split of Sales by Product Category",
"subCaption": "In top 5 stores last month",
"yAxisname": "Sales (In USD)",
"numberPrefix": "$"
},
"categories": [{
"category": [{
"label": "Bakersfield Central"
},
{
"label": "Garden Groove harbour"
},
{
"label": "Los Angeles Topanga"
},
{
"label": "Compton-Rancho Dom"
},
{
"label": "Daly City Serramonte"
}
]
}],
"dataset": [{
"seriesname": "Food Products",
"data": [{
"value": "17000"
},
{
"value": "19500"
},
{
"value": "12500"
},
{
"value": "14500"
},
{
"value": "17500"
}
]
},
{
"seriesname": "Non-Food Products",
"data": [{
"value": "25400"
},
{
"value": "29800"
},
{
"value": "21800"
},
{
"value": "19500"
},
{
"value": "11500"
}
]
}
],
"trendlines": [{
"line": [{
"startvalue": "15000",
"color": "#5D62B5",
"valueOnRight": "1",
"displayvalue": "Avg. for{br}Food"
},
{
"startvalue": "22000",
"color": "#29C3BE",
"valueOnRight": "1",
"displayvalue": "Avg. for{br}Non-food"
}
]
}]
}
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above multi-series chart.
Multi-series Line Chart
Now, let's create a multi-series line chart which will show the comparison between the number of visitors in malls in a week. The line segments for both datasets, one for the last week and one for the current week, have been rendered using different colors. This makes it easy to interpret and compare the data.
To render a multi-series line chart, set the type to msline.
For a detailed list of attributes, refer to the chart attributes page of multi-series line 2D chart.
A multi-series line chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"xAxisName": "Day"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"vline": "true",
"lineposition": "0",
"color": "#62B58F",
"labelHAlign": "center",
"labelPosition": "0",
"label": "National holiday",
"dashed": "1"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Bakersfield Central",
"data": [
{
"value": "15123"
},
{
"value": "14233"
},
{
"value": "25507"
},
{
"value": "9110"
},
{
"value": "15529"
},
{
"value": "20803"
},
{
"value": "19202"
}
]
},
{
"seriesname": "Los Angeles Topanga",
"data": [
{
"value": "13400"
},
{
"value": "12800"
},
{
"value": "22800"
},
{
"value": "12400"
},
{
"value": "15800"
},
{
"value": "19800"
},
{
"value": "21800"
}
]
}
],
"trendlines": [
{
"line": [
{
"startvalue": "17022",
"color": "#62B58F",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'msline',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"xAxisName": "Day"
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"vline": "true",
"lineposition": "0",
"color": "#62B58F",
"labelHAlign": "center",
"labelPosition": "0",
"label": "National holiday",
"dashed": "1"
}, {
"label": "Thu"
}, {
"label": "Fri"
}, {
"label": "Sat"
}, {
"label": "Sun"
}]
}],
"dataset": [{
"seriesname": "Bakersfield Central",
"data": [{
"value": "15123"
}, {
"value": "14233"
}, {
"value": "25507"
}, {
"value": "9110"
}, {
"value": "15529"
}, {
"value": "20803"
}, {
"value": "19202"
}]
}, {
"seriesname": "Los Angeles Topanga",
"data": [{
"value": "13400"
}, {
"value": "12800"
}, {
"value": "22800"
}, {
"value": "12400"
}, {
"value": "15800"
}, {
"value": "19800"
}, {
"value": "21800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "17022",
"color": "#62B58F",
"valueOnRight": "1",
"displayvalue": "Average"
}]
}]
}
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above multi-series chart.
Multi-series Area Chart
To render a multi-series area chart the same use case as above, set the type to msarea.
For a detailed list of attributes, refer to the chart attributes page of multi-series area 2D chart.
A multi-series area chart looks like:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"xAxisName": "Day"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"vline": "true",
"lineposition": "0",
"color": "#62B58F",
"labelHAlign": "center",
"labelPosition": "0",
"label": "National holiday",
"dashed": "1"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Bakersfield Central",
"data": [
{
"value": "15123"
},
{
"value": "14233"
},
{
"value": "25507"
},
{
"value": "9110"
},
{
"value": "15529"
},
{
"value": "20803"
},
{
"value": "19202"
}
]
},
{
"seriesname": "Los Angeles Topanga",
"data": [
{
"value": "13400"
},
{
"value": "12800"
},
{
"value": "22800"
},
{
"value": "12400"
},
{
"value": "15800"
},
{
"value": "19800"
},
{
"value": "21800"
}
]
}
],
"trendlines": [
{
"line": [
{
"startvalue": "17022",
"color": "#62B58F",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
]
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'msarea',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Number of visitors last week",
"subCaption": "Bakersfield Central vs Los Angeles Topanga",
"xAxisName": "Day"
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"vline": "true",
"lineposition": "0",
"color": "#62B58F",
"labelHAlign": "center",
"labelPosition": "0",
"label": "National holiday",
"dashed": "1"
}, {
"label": "Thu"
}, {
"label": "Fri"
}, {
"label": "Sat"
}, {
"label": "Sun"
}]
}],
"dataset": [{
"seriesname": "Bakersfield Central",
"data": [{
"value": "15123"
}, {
"value": "14233"
}, {
"value": "25507"
}, {
"value": "9110"
}, {
"value": "15529"
}, {
"value": "20803"
}, {
"value": "19202"
}]
}, {
"seriesname": "Los Angeles Topanga",
"data": [{
"value": "13400"
}, {
"value": "12800"
}, {
"value": "22800"
}, {
"value": "12400"
}, {
"value": "15800"
}, {
"value": "19800"
}, {
"value": "21800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "17022",
"color": "#62B58F",
"valueOnRight": "1",
"displayvalue": "Average"
}]
}]
}
});
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above multi-series chart.
Note that the number of category objects defined should be equal to the number of data objects defined, that is, if you mention twelve categories (twelve months), the data for both years (2013 and 2014) should also contain twelve data objects (twelve rows of data). Else, the chart will display empty space at that position.
Was this article helpful to you ?