<!DOCTYPE HTML>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
div
id
=
"chartID"
style="height:400px; max-width:950px;
margin:0px auto;">
</
div
>
<
script
>
window.onload = function () {
// Instantiate the CanvasJS object
var chart = new CanvasJS.Chart("chartID", {
animationEnabled: true,
title: {
text: "Number of mobile phones Sold"
},
// Setting the minimum and maximum date for the x axis
axisX: {
minimum: new Date(2014, 01, 25),
maximum: new Date(2017, 09, 15),
valueFormatString: "DD MMM YY"
},
axisY: {
title: "Mobile phone Sales number"
},
// Actual data for rendering in the chart with labels
data: [{
type: "area",
dataPoints: [
{ x: new Date(2014, 05, 01),y: 73000,
label:"Samsung"},
{ x: new Date(2015, 03, 11),y: 61100,
label:"Nokia"},
{ x: new Date(2015, 02, 15),y: 47000,
label: "Oneplus" },
{ x: new Date(2015, 03, 30),y: 59790,
label: "Oneplus" },
{ x: new Date(2016, 03, 19),y: 74888,
label: "Samsung" },
{ x: new Date(2016, 05, 22),y: 51111,
label: "Infinix" },
{ x: new Date(2016, 04, 17),y: 58000,
label: "Nokia" },
{ x: new Date(2016, 02, 25),y: 56000,
label: "Samsung" },
{ x: new Date(2017, 09, 01),y: 78300,
label: "Nokia"}
]
}]
});
// Render the chart in the above HTML div element
chart.render();
}
</
script
>
</
body
>
</
html
>