Graph not displaying in MVC Core

Question

Hello lovely clever people, I'm hoping you can help me out with a Graph project I am doing. I found some beautiful code for creating graphs here The piece I am using is the "Data from Database", in an MVC Core project, when debugging I can see in the View that the values from the database are being successfully input into the ViewBag.DataPoints but the graph is not being displayed. I am using .NET Core 3.1 in Visual Studio 2019. I would greatly appreciate any help ye could offer. Thanks a million.

Model:

public class Point
    {
        [Key]
        public int x { get; set; }
        public Nullable<int> y { get; set; }
    }

Context:

public class DataPointsDB : DbContext
    {
        public DataPointsDB(DbContextOptions<DataPointsDB> options)
            : base(options)
        {
        }
    
        public virtual DbSet<Point> Points { get; set; }
    }

Controller:

public class PointsController : Controller
    {
        private readonly DataPointsDB _db;

        public PointsController(DataPointsDB db)
        {
            _db = db;
        }
        public IActionResult Index()
        {
            IEnumerable<Point> objList = _db.Points;
            return View(objList);
        }

        public IActionResult Create()
        {
            ViewData["x"] = new SelectList(_db.Points, "x", "y");
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("x,y")] Point point)
        {
            if (ModelState.IsValid)
            {
                _db.Add(point);
                await _db.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            ViewData["x"] = new SelectList(_db.Points, "x", "y", point.x);
            return View(point);
        }

        // GET: HowTo
        public ActionResult DataFromDataBase()
        {
            try
            {
                ViewBag.DataPoints = JsonConvert.SerializeObject(_db.Points.ToList(), _jsonSetting);

                return View();
            }
            catch (EntityException)
            {
                return View("Error");
            }
            catch (System.Data.SqlClient.SqlException)
            {
                return View("Error");
            }
        }

        JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };


    }

View:

@model IEnumerable<Test_Chart.Models.Point>


<div id="chartContainer"></div>

<script type="text/javascript">
    var result = @Html.Raw(ViewBag.DataPoints);
    var dataPoints =[];
    for(var i = 0; i < result.length; i++){
        dataPoints.push({label:result[i].x, y:result[i].y});
    }

    $(function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            zoomEnabled: true,
            animationEnabled: true,
            title: {
                text: "Line Chart with Data-Points from DataBase"
            },
            data: [
            {
                type: "line",

                dataPoints: dataPoints,
            }
            ]
        });
        chart.render();
    });
</script>

and I have added <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> in the _Layout

Thanks again x

Answer 1

FYI for your learning....

//this is not needed as we not doing anything, if you want the chart to 
//happen when the page is loaded then add "renderChart();" inside
//otherwise delete and add onclick to some element with "renderChart();"
$(function () {
   
   //this is short hand for saying when the doc is finished loading... run this.
   
});

//out side of function so its global, 
//example: not what I'm suggesting...
// trying to show you the importance of do something when 
// we have the data... 
var dataPoints =[];
function renderChart1() {

   
    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "light2",
        zoomEnabled: true,
        animationEnabled: true,
        title: {
            text: "Line Chart with Data-Points from DataBase"
        },
        data: [
        {
            type: "line",

            dataPoints: dataPoints,
        }
        ]
    });
    chart.render();

}

//now you can not call renderChart1() as there are no dataPoints so lets fetch them 
//https://www.w3schools.com/jquery/jquery_ref_ajax.asp

$.get("http://localhost:64160/DataFromDataBase", function(data){
    
    //when we have the data set it. this is why we made it global
    //a little confusing but was trying to show smaller steps
   // to get the version below altho i think i my have just made it more confusing
    dataPoints = data;
    renderChart1();
    
});


//better version is.... its much easier to understand 
//-----------------------------------------------

function renderChart() {
   
   $.get("http://localhost:64160/DataFromDataBase", function(data){
    
        //data could be a more complex object instead of just the dataPoints

        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "light2",
            zoomEnabled: true,
            animationEnabled: true,
            title: {
                text: "Line Chart with Data-Points from DataBase"
            },
            data: [{
                type: "line",
                dataPoints: data,
            }]
        });
        chart.render();
    
    });
   
}
//-----------------------------------------------