In this article, we will learn to implement single and multi-series Spline charts using Canvas JS plugin
Spline Chart can be defined as a type of line chart which is used to plot time-dependent variables. The basic difference between a Line and a spline chart is the points on the spline chart are connected with the help of smooth curves instead of straight lines which ensures that the visualization is more informative to the analyst.
Syntax:
new CanvasJS.Chart($("#ID"), {
data: [{
type: "spline",
dataPoints: [
{...},
]
},
]
....
});
Approach:
- 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.
- Create charts depending on the data available for code implementation.
CDN Link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
Example 1: The example demonstrates the spline chart using the plugin. It shows the smooth curve for the number of students getting admissions (y-axis) over a period of time (Academic years in the x-axis).
HTML
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src= </script> </head> <body> <div style="text-align:center"> <h1 style="color:green">neveropen</h1> <h3>Canvas JS Spline 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: "Spline chart showing admissions count" }, axisX:{ title: "Academic Year", }, axisY:{ title: "Admissions Count", }, data: [ { type: "spline", xValueFormatString: "YYYY", color:"green", dataPoints: [ { x:new Date(2016, 0,01), y:110}, { x:new Date(2017, 0,01), y:125 }, { x:new Date(2018, 0,01), y:108}, { x:new Date(2019, 0,01), y:140}, { x:new Date(2020, 0,01), y:143}, { x:new Date(2021, 0,01), y:102 }, { x:new Date(2022, 0,01), y:122 } ]// end dataPoints } ]// end data }); chart.render(); }// window onload </script> </body> </html> |
Output:
Example 2: The example demonstrates the multi-series spline chart using the plugin. It shows the smooth curve for the number of students getting admissions (y-axis) over a period of time (Academic years in the x-axis) in both 10th grade and 12th grade both having separate smooth curves. Information for both grades is stored in separate dataPoints as you can see in the code. Other styling settings have been done by using attributes along with the handling of a legend itemClick event trigger.
HTML
<!DOCTYPE HTML> <html> <head> <script type="text/javascript" src= </script> <script type="text/javascript" src= </script> </head> <body> <div style="text-align:center"> <h1 style="color:green">neveropen</h1> <h3>Canvas JS Spline Chart </h3> </div> <div id="chartID" style="height:400px; max-width:950px; margin:0px auto;"> </div> <div style="height:15px"></div> <div style="text-align:center" id="legendItemID"> </div> <script> window.onload = function () { var chart = new CanvasJS.Chart("chartID", { title:{ text: "Multi series Spline chart showing admissions count" }, axisX:{ title: "Academic Year", }, axisY:{ title: "Admissions Count", stripLines: [{ value: 143, label: "Highest" }] }, toolTip: { shared: "true" }, legend: { cursor:"pointer", itemclick: function(e){ $("#legendItemID").show().html( "You clicked on " +e.dataSeries.name+ " of type " + e.dataSeries.type); } }, data: [ { type: "spline", xValueFormatString: "YYYY", showInLegend: true, name: "Grade 10th", color:"green", lineThickness: 2, dataPoints: [ { x:new Date(2016, 0,01), y:110}, { x:new Date(2017, 0,01), y:125 }, { x:new Date(2018, 0,01), y:108}, { x:new Date(2019, 0,01), y:140}, { x:new Date(2020, 0,01), y:143}, { x:new Date(2021, 0,01), y:102 }, { x:new Date(2022, 0,01), y:122 } ]// end dataPoints }, { type: "spline", xValueFormatString: "YYYY", showInLegend: true, lineThickness: 2, name: "Grade 12th", color:"red", dataPoints: [ { x:new Date(2016, 0,01), y:98}, { x:new Date(2017, 0,01), y:126 }, { x:new Date(2018, 0,01), y:100}, { x:new Date(2019, 0,01), y:130}, { x:new Date(2020, 0,01), y:133}, { x:new Date(2021, 0,01), y:109 }, { x:new Date(2022, 0,01), y:120 } ]// end dataPoints }, ]// end data }); chart.render(); }// window onload </script> </body> </html> |
Output:
Conclusion: Spline charts can be used for plotting data that needs the usage of smooth curve-fitting. Whenever a developer needs to display some data trends depending on the time-dependent variable, he needs to implement spline charts. If there are multiple categories to show, use multi-series spline charts to show the graphical representation of multiple time-dependent variables.
