In this article, we will learn to implement Muti Series charts using Canvas JS plugin.
Multi Series charts easily visualize multiple data series without the use of additional charts. It is very useful when we analyze data series that were measured in different scales and units and allows us to compare two dissimilar series of data on the same chart. They can be used for plotting data for multiple categories of data that require the usage of curve-fitting.
Using the Canvas JS plugin, we can add more than one dataSeries element to a data Array to create Multi-Series charts. We have to use the type property of the data point to define the chart you want to render. The type property can take values “column”, “line”, “area”, “bar”, “bubble”, “stackedArea”, “stackedColumn”, etc.
Note: “Pie” or “Doughnut” charts can only have one series.
Syntax:
new CanvasJS.Chart($("#ID"), {
data: [{
type: "column",
dataPoints: [
{...},
]
},
{
type: "column",
dataPoints: [
{ ... }
]
}
]
....
});Note: The type attribute is changed depending on the developer’s need.
Approach:
- Choose a multi series chart type for implementation from the above-mentioned attributes.
- In the HTML design, use the <div> tag for showing the chart chosen.
- In the script part of the code, instantiate the CanvasJS object by setting the type, data, datapoints, and other options properties of the library using the syntax.
- Include the CDN link in the head section of the code to use the plugin’s features.
- Render the chart using the render() method of the Canvas JS plugin.
- Set other attributes or properties as needed for the styling of the charts as given in the following example codes.
- Make charts depending on the data available for code implementation.
CDN Link:
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
Example 1: The following code demonstrates a multi-series line chart using the Canvas JS plugin. This shows the changes in various monthly homely expenses and income (y-axis) over a period of years (x-axis). The different colored lines show different categories of expenses like food, maintenance, school, and so on. Refer to the output and hover it for better understanding.
<!DOCTYPE HTML> <html>
<head>
<script type="text/javascript" </script>
</head>
<body>
<div style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Canvas JS Multiseries Line Chart </h3>
</div>
<div id="chartID" style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title: {
text:
"Multiseries Line Chart for income vs monthly expense"
},
axisX: {
title: "Year",
},
axisY: {
title: "Amount (in Rupees)",
Prefix: " Rs."
},
data: [
{
type: "line",
showInLegend: true,
name: "Maintenance expenses",
color: "red",
toolTipContent:
"<b>{name}:</b><br>in year {label}: Rs.{y}",
dataPoints: [
{ label: "2010", y: 5000 },
{ label: "2012", y: 5500 },
{ label: "2014", y: 5789 },
{ label: "2016", y: 5890 },
{ label: "2018", y: 5998 },
{ label: "2020", y: 6000 },
{ label: "2022", y: 6235 },
{ label: "2024", y: 6789 }
]// end dataPoints
},
{
type: "line",
showInLegend: true,
name: "School expenses",
color: "lightgreen",
toolTipContent:
"<b>{name}:</b><br>in year {label}: Rs.{y}",
dataPoints: [
{ label: "2010", y: 8000 },
{ label: "2012", y: 8500 },
{ label: "2014", y: 9789 },
{ label: "2016", y: 8900 },
{ label: "2018", y: 8998 },
{ label: "2020", y: 9000 },
{ label: "2022", y: 9235 },
{ label: "2024", y: 10789 }
]// end dataPoints
},
{
type: "line",
showInLegend: true,
name: "Food n Groceries",
toolTipContent:
"<b>{name}:</b><br>in year {label}: Rs.{y}",
color: "lightblue",
dataPoints: [
{ label: "2010", y: 12000 },
{ label: "2012", y: 12879 },
{ label: "2014", y: 12999 },
{ label: "2016", y: 13005 },
{ label: "2018", y: 13456 },
{ label: "2020", y: 13879 },
{ label: "2022", y: 14000 },
{ label: "2024", y: 14550 }
]// end dataPoints
},
{
type: "line",
color: "blue",
showInLegend: true,
name: "Monthly Income",
toolTipContent:
"<b>{name}:</b><br>in year {label}: Rs.{y}",
dataPoints: [
{ label: "2010", y: 25000 },
{ label: "2012", y: 26950 },
{ label: "2014", y: 27999 },
{ label: "2016", y: 28000 },
{ label: "2018", y: 29999 },
{ label: "2020", y: 28890 },
{ label: "2022", y: 29000 },
{ label: "2024", y: 31950 }
]// end dataPoints
}
]// end data
});
chart.render();
}// window onload
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates a multi-series column chart using the Canvas JS plugin. This shows the number of articles (y-axis) published based on different technologies in the first quarter of the year (x-axis). Different colored columns represent different technologies like “Blockchain”, “Python”, “Data structures”, and “Algorithms”.
<!DOCTYPE HTML> <html>
<head>
<script type="text/javascript" src=
</script>
</head>
<body>
<div style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Canvas JS Multiseries Column Chart </h3>
</div>
<div id="chartID" style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title:{
text:
"Multiseries Column Chart for articles published in first quarter"
},
axisY:{
title: "Number of articles published"
},
data: [
{
type: "column",
showInLegend: true,
name:"Blockchain",
color:"red",
toolTipContent:
"<b>Articles published on {name}</b> in month {label}:<br> {y}",
dataPoints: [
{ label:"Jan", y:50 },
{ label:"Feb", y:55},
{ label:"March", y:89},
{ label: "April", y:90}
]// end dataPoints
},
{
type: "column",
showInLegend: true,
name:"Python",
color:"blue",
toolTipContent:
"<b>Articles published on {name}</b> in month <b> {label}:</b><br> {y}",
dataPoints: [
{ label:"Jan", y:65 },
{ label:"Feb", y:45},
{ label:"March", y:68},
{ label: "April", y:79}
]// end dataPoints
},
{
type: "column",
showInLegend: true,
name: "Data Structures",
color:"yellow",
toolTipContent:
"<b>Articles published on {name}</b> in month <b>{label}:</b><br> {y}",
dataPoints: [
{ label:"Jan", y:80},
{ label:"Feb", y:85 },
{ label:"March", y:97},
{ label: "April", y:89}
]// end dataPoints
},
{
type: "column",
showInLegend: true,
name:"Algorithms",
toolTipContent:
"<b>Articles published on {name}</b> in month <b>{label}:</b><br> {y}",
color:"grey",
dataPoints: [
{ label:"Jan", y:45},
{ label:"Feb", y:61 },
{ label:"March", y:49},
{ label: "April", y:33}
]// end dataPoints
}
]// end data
});
chart.render();
}// window onload
</script>
</body>
</html>
|
Output:
Conclusion: Whenever we need to display charts on multiple categories without using additional ones, we need to use multi-series data charts. It is used to analyze and compare data points at one time grouped in sub-categories.