Hi rani,
Check this example. Now please take its reference and correct your code.
Model
public class DataPoint
{
public double X { get; set; }
public double Y { get; set; }
public double Z { get; set; }
}
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public ContentResult GetData()
{
List<DataPoint> dataPoints = new List<DataPoint>();
dataPoints.Add(new DataPoint() { X = 1481999400000, Y = 4.67, Z = 3 });
dataPoints.Add(new DataPoint() { X = 1482604200000, Y = 4.7, Z = 2 });
dataPoints.Add(new DataPoint() { X = 1483209000000, Y = 4.96, Z = 5 });
dataPoints.Add(new DataPoint() { X = 1483813800000, Y = 5.12, Z = 4 });
dataPoints.Add(new DataPoint() { X = 1484418600000, Y = 5.08, Z = 8 });
dataPoints.Add(new DataPoint() { X = 1485023400000, Y = 5.11, Z = 3 });
dataPoints.Add(new DataPoint() { X = 1485628200000, Y = 5, Z = 2 });
dataPoints.Add(new DataPoint() { X = 1486233000000, Y = 5.2, Z = 7 });
dataPoints.Add(new DataPoint() { X = 1486837800000, Y = 4.7, Z = 5 });
dataPoints.Add(new DataPoint() { X = 1487442600000, Y = 4.74, Z = 9 });
dataPoints.Add(new DataPoint() { X = 1488047400000, Y = 4.67, Z = 1 });
dataPoints.Add(new DataPoint() { X = 1488652200000, Y = 4.66, Z = 4 });
}
}
View
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON("/Home/GetData").then(function (data) {
var datas = [];
var dataPoints1 = [];
var dataPoints2 = [];
for (var i = 0; i < data.length; i++) {
dataPoints1.push({
x: new Date(data[i].X),
y: data[i].Y,
indexLabel: data[i].Y.toString()
});
dataPoints2.push({
x: new Date(data[i].X),
y: data[i].Z,
indexLabel: data[i].Z.toString()
});
}
datas.push({
type: "line",
yValueFormatString: "$#,###",
dataPoints: dataPoints1,
showInLegend: true,
legendText: "Stock 1",
markerSize: 0
});
datas.push({
type: "line",
yValueFormatString: "$#,###",
dataPoints: dataPoints2,
showInLegend: true,
legendText: "Stock 2",
markerSize: 0
});
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title: {
text: "Stock Value over Years"
},
axisY: {
title: "",
titleFontSize: 24
},
data: datas
});
chart.render();
});
});
</script>
</body>
</html>
Screenshot
