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
A multi-series column 2D chart looks as shown below:
{
"header": "Chart Anatomy",
"subHeader": "To know how FusionCharts works it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below are different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [{
"itemHeader": "Chart with Multiple Series",
"imgSrc": "ms-column-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption. You can also configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "26.5%",
"topPosition": "2.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add the caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "You can customize font properties and cosmetics of the caption using attributes. Know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for the sub-caption. You can also configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "53.5%",
"topPosition": "8%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "You can customize font properties and cosmetics of the sub-caption using attributes. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "80%",
"topPosition": "5%",
"annotationLinks": [{
"linkDesc": "You can customize the canvas border. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize the background color for canvas, as well as add a gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to a line on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "11%",
"topPosition": "67%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "41%",
"topPosition": "80%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "59.5%",
"topPosition": "71.5%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "8%",
"topPosition": "2%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "-2%",
"topPosition": "40%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It provides context-sensitive information about the data point.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "64%",
"topPosition": "22.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of a tooltip. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can customize the text of a tooltip and use values plotted on the chart using macros. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
}
]
}
]
}
}
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"
}
]
}
]
}<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" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Previous Year">
<set value="10000" />
<set value="11500" />
<set value="12500" />
<set value="15000" />
</dataset>
<dataset seriesname="Current Year">
<set value="25400" />
<set value="29800" />
<set value="21800" />
<set value="26800" />
</dataset>
<trendlines>
<line startvalue="12250" color="#5D62B5" displayvalue="Previous{br}Average" valueonright="1" thickness="1" showbelow="1" tooltext="Previous year quarterly target : $13.5K" />
<line startvalue="25950" color="#29C3BE" displayvalue="Current{br}Average" valueonright="1" thickness="1" showbelow="1" tooltext="Current year quarterly target : $23K" />
</trendlines>
</chart><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 chartObj = new FusionCharts({
type: 'mscolumn2d',
renderAt: 'chart-container',
width: '100%',
height: '390',
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"
}]
}]
}
});
chartObj.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"
}
]
}
]
}<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" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Previous Year">
<set value="10000" />
<set value="11500" />
<set value="12500" />
<set value="15000" />
</dataset>
<dataset seriesname="Current Year">
<set value="25400" />
<set value="29800" />
<set value="21800" />
<set value="26800" />
</dataset>
<trendlines>
<line startvalue="12250" color="#5D62B5" displayvalue="Previous{br}Average" valueonright="1" thickness="1" showbelow="1" tooltext="Previous year quarterly target : $13.5K" />
<line startvalue="25950" color="#29C3BE" displayvalue="Current{br}Average" valueonright="1" thickness="1" showbelow="1" tooltext="Current year quarterly target : $23K" />
</trendlines>
</chart><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 chartObj = new FusionCharts({
type: 'mscolumn3d',
renderAt: 'chart-container',
width: '680',
height: '390',
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"
}]
}]
}
});
chartObj.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"
}
]
}
]
}<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" />
<category label="Garden Groove harbour" />
<category label="Los Angeles Topanga" />
<category label="Compton-Rancho Dom" />
<category label="Daly City Serramonte" />
</categories>
<dataset seriesname="Food Products">
<set value="17000" />
<set value="19500" />
<set value="12500" />
<set value="14500" />
<set value="17500" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="25400" />
<set value="29800" />
<set value="21800" />
<set value="19500" />
<set value="11500" />
</dataset>
<trendlines>
<line startvalue="15000" color="#5D62B5" valueonright="1" displayvalue="Avg. for{br}Food" />
<line startvalue="22000" color="#29C3BE" valueonright="1" displayvalue="Avg. for{br}Non-food" />
</trendlines>
</chart><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 chartObj = 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"
}
]
}]
}
});
chartObj.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"
}
]
}
]
}<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" />
<category label="Garden Groove harbour" />
<category label="Los Angeles Topanga" />
<category label="Compton-Rancho Dom" />
<category label="Daly City Serramonte" />
</categories>
<dataset seriesname="Food Products">
<set value="17000" />
<set value="19500" />
<set value="12500" />
<set value="14500" />
<set value="17500" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="25400" />
<set value="29800" />
<set value="21800" />
<set value="19500" />
<set value="11500" />
</dataset>
<trendlines>
<line startvalue="15000" color="#5D62B5" valueonright="1" displayvalue="Avg. for{br}Food" />
<line startvalue="22000" color="#29C3BE" valueonright="1" displayvalue="Avg. for{br}Non-food" />
</trendlines>
</chart><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 chartObj = 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"
}
]
}]
}
});
chartObj.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.
{
"header": "Chart Components (Anatomy)",
"subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below you can find different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [{
"_itemHeader": "Multi-series Line Chart Anatomy",
"imgSrc": "ms-line-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "31.5%",
"topPosition": "5%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "63%",
"topPosition": "9.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "80%",
"topPosition": "2%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "84%",
"topPosition": "62%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "51%",
"topPosition": "73%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "61.5%",
"topPosition": "66%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "11.5%",
"topPosition": "8%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "18%",
"topPosition": "46.5%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "9",
"annotationName": "Anchors",
"annotationDesc": "Each data point in a line/spline/area chart is represented by an anchor. Anchors help to identify the data point in the chart easily. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/anchors-and-lines",
"leftPosition": "78%",
"topPosition": "25%",
"annotationLinks": []
},
{
"annotationNumber": "10",
"annotationName": "Crossline",
"annotationDesc": "Cross line is a vertical line/area used as a quick reference for data plots. Learn more about it ",
"annotationDescLinkPath": "/dev/chart-guide/chart-configurations/cross-line",
"leftPosition": "33%",
"topPosition": "39%",
"annotationLinks": []
},
{
"annotationNumber": "11",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "64%",
"topPosition": "23.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
}
]
}
]
}
}
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"
}
]
}
]
}<chart theme="fusion" caption="Number of visitors last week" subcaption="Bakersfield Central vs Los Angeles Topanga" xaxisname="Day">
<categories>
<category label="Mon" />
<category label="Tue" />
<category label="Wed" />
<vline lineposition="0" color="#62B58F" labelhalign="center" labelposition="0" label="National holiday" dashed="1" />
<category label="Thu" />
<category label="Fri" />
<category label="Sat" />
<category label="Sun" />
</categories>
<dataset seriesname="Bakersfield Central">
<set value="15123" />
<set value="14233" />
<set value="25507" />
<set value="9110" />
<set value="15529" />
<set value="20803" />
<set value="19202" />
</dataset>
<dataset seriesname="Los Angeles Topanga">
<set value="13400" />
<set value="12800" />
<set value="22800" />
<set value="12400" />
<set value="15800" />
<set value="19800" />
<set value="21800" />
</dataset>
<trendlines>
<line startvalue="17022" color="#62B58F" valueonright="1" displayvalue="Average" />
</trendlines>
</chart><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 chartObj = new FusionCharts({
type: 'msline',
renderAt: 'chart-container',
width: '680',
height: '390',
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"
}]
}]
}
});
chartObj.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.
{
"header": "Chart Components (Anatomy)",
"subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below you can find different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [{
"_itemHeader": "Multi-series Area Chart Anatomy",
"imgSrc": "ms-area-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "29.5%",
"topPosition": "7%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "66%",
"topPosition": "12%",
"annotationLinks": [{
"linkDesc": "Learn how to add sub-caption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "84%",
"topPosition": "8%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "88%",
"topPosition": "65%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "51%",
"topPosition": "77%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "63.5%",
"topPosition": "69%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "7.5%",
"topPosition": "8%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "18%",
"topPosition": "46.5%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "9",
"annotationName": "Crossline",
"annotationDesc": "Cross line is a vertical line/area used as a quick reference for data plots. Learn more about it ",
"annotationDescLinkPath": "/dev/chart-guide/chart-configurations/cross-line",
"leftPosition": "33%",
"topPosition": "39%",
"annotationLinks": []
},
{
"annotationNumber": "10",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "71%",
"topPosition": "84%",
"annotationLinks": [
{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effect feature, Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
}
]
}
]
}
}
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"
}
]
}
]
}<chart theme="fusion" caption="Number of visitors last week" subcaption="Bakersfield Central vs Los Angeles Topanga" xaxisname="Day">
<categories>
<category label="Mon" />
<category label="Tue" />
<category label="Wed" />
<vline lineposition="0" color="#62B58F" labelhalign="center" labelposition="0" label="National holiday" dashed="1" />
<category label="Thu" />
<category label="Fri" />
<category label="Sat" />
<category label="Sun" />
</categories>
<dataset seriesname="Bakersfield Central">
<set value="15123" />
<set value="14233" />
<set value="25507" />
<set value="9110" />
<set value="15529" />
<set value="20803" />
<set value="19202" />
</dataset>
<dataset seriesname="Los Angeles Topanga">
<set value="13400" />
<set value="12800" />
<set value="22800" />
<set value="12400" />
<set value="15800" />
<set value="19800" />
<set value="21800" />
</dataset>
<trendlines>
<line startvalue="17022" color="#62B58F" valueonright="1" displayvalue="Average" />
</trendlines>
</chart><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 chartObj = new FusionCharts({
type: 'msarea',
renderAt: 'chart-container',
width: '680',
height: '390',
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"
}]
}]
}
});
chartObj.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.