Create Stock Chart using jQuery CanvasJS in ASP.NET Core MVC

Hi rani,

Use CanvasJS line Chart.

Check this example. Now please take its reference and correct your code.

Model

using System.Runtime.Serialization;
public class DataPoint
{
	public DataPoint(double x, double y)
	{
		this.X = x;
		this.Y = y;
	}

	[DataMember(Name = "x")]
	public Nullable<double> X = null;

	[DataMember(Name = "y")]
	public Nullable<double> Y = null;
}

Namespaces

using Newtonsoft.Json;

Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }

    public ContentResult GetData()
    {
        List<DataPoint> dataPoints = new List<DataPoint>();

        dataPoints.Add(new DataPoint(1481999400000, 4.67));
        dataPoints.Add(new DataPoint(1482604200000, 4.7));
        dataPoints.Add(new DataPoint(1483209000000, 4.96));
        dataPoints.Add(new DataPoint(1483813800000, 5.12));
        dataPoints.Add(new DataPoint(1484418600000, 5.08));
        dataPoints.Add(new DataPoint(1485023400000, 5.11));
        dataPoints.Add(new DataPoint(1485628200000, 5));
        dataPoints.Add(new DataPoint(1486233000000, 5.2));
        dataPoints.Add(new DataPoint(1486837800000, 4.7));
        dataPoints.Add(new DataPoint(1487442600000, 4.74));
        dataPoints.Add(new DataPoint(1488047400000, 4.67));
        dataPoints.Add(new DataPoint(1488652200000, 4.66));
        dataPoints.Add(new DataPoint(1489257000000, 4.86));
        dataPoints.Add(new DataPoint(1489861800000, 4.91));
        dataPoints.Add(new DataPoint(1490466600000, 5.12));
        dataPoints.Add(new DataPoint(1491071400000, 5.4));
        dataPoints.Add(new DataPoint(1491676200000, 5.08));
        dataPoints.Add(new DataPoint(1492281000000, 5.05));
        dataPoints.Add(new DataPoint(1492885800000, 4.98));
        dataPoints.Add(new DataPoint(1493490600000, 4.89));
        dataPoints.Add(new DataPoint(1494095400000, 4.9));
        dataPoints.Add(new DataPoint(1494700200000, 4.95));
        dataPoints.Add(new DataPoint(1495305000000, 4.88));
        dataPoints.Add(new DataPoint(1495909800000, 5.07));
        dataPoints.Add(new DataPoint(1496514600000, 5.14));
        dataPoints.Add(new DataPoint(1497119400000, 5.05));
        dataPoints.Add(new DataPoint(1497724200000, 5.03));
        dataPoints.Add(new DataPoint(1498329000000, 4.93));
        dataPoints.Add(new DataPoint(1498933800000, 4.97));
        dataPoints.Add(new DataPoint(1499538600000, 4.86));
        dataPoints.Add(new DataPoint(1500143400000, 4.95));
        dataPoints.Add(new DataPoint(1500748200000, 4.83));
        dataPoints.Add(new DataPoint(1501353000000, 4.83));
        dataPoints.Add(new DataPoint(1501957800000, 4.73));
        dataPoints.Add(new DataPoint(1502562600000, 4.56));
        dataPoints.Add(new DataPoint(1503167400000, 4.34));
        dataPoints.Add(new DataPoint(1503772200000, 4.25));
        dataPoints.Add(new DataPoint(1504377000000, 4.18));
        dataPoints.Add(new DataPoint(1504981800000, 4.22));
        dataPoints.Add(new DataPoint(1505586600000, 4.18));
        dataPoints.Add(new DataPoint(1506191400000, 4.31));
        dataPoints.Add(new DataPoint(1506796200000, 4.34));
        dataPoints.Add(new DataPoint(1507401000000, 4.47));
        dataPoints.Add(new DataPoint(1508005800000, 4.57));
        dataPoints.Add(new DataPoint(1508610600000, 4.63));
        dataPoints.Add(new DataPoint(1509215400000, 4.55));
        dataPoints.Add(new DataPoint(1509820200000, 4.55));
        dataPoints.Add(new DataPoint(1510425000000, 4.44));
        dataPoints.Add(new DataPoint(1511029800000, 4.46));
        dataPoints.Add(new DataPoint(1511634600000, 4.41));
        dataPoints.Add(new DataPoint(1512239400000, 4.3));
        dataPoints.Add(new DataPoint(1512844200000, 4.31));
        dataPoints.Add(new DataPoint(1513449000000, 4.3));
        dataPoints.Add(new DataPoint(1513621800000, 4.36));

        JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
        return Content(JsonConvert.SerializeObject(dataPoints, _jsonSetting), "application/json");
    }
}

View

@{
    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 dataPoints = [];
                for (var i = 0; i < data.length; i++) {
                    dataPoints.push({
                        x: new Date(data[i].X),
                        y: data[i].Y
                    });
                }
                var chart = new CanvasJS.Chart("chartContainer", {
                    animationEnabled: true,
                    theme: "light2",
                    title: {
                        text: "Stock Price"
                    },
                    axisY: {
                        title: "",
                        titleFontSize: 24
                    },
                    data: [{
                        type: "line",
                        yValueFormatString: "$#,###",
                        dataPoints: dataPoints
                    }]
                });
                chart.render();
            });
        });
    </script>
</body>
</html>

Screenshot

Reference:

https://canvasjs.com/asp-net-mvc-charts/json-data-api-ajax-chart/