<!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"
>GeeksforGeeks</
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
>