How to populate Google Charts using data from database without DataTable

Question

I have read a lot of articles and questions here at stackoverflow, but most of them are about using DataTable. However, as I understood there is NO DataTable in asp.net CORE. I'm still pretty new to this and have no idea what alternative to use instead of DataTable. The Google Charts works perfectly with the hard coded values, but how to approach it using actual data from my database is where my understanding ends.

Can someone please provide me with a detailed approach on how to do this so that I can understand it better? I'll greatly appreciate it and thanks in advance!

I used information and code samples from here:

• https://developers.google.com/chart/interactive/docs/datatables_dataviews
• http://www.c-sharpcorner.com/UploadFile/4b0136/introducing-google-chart-in-Asp-Net-mvc/
• How to populate google charts using SQL Server Database in MVC Razor
• How to populate google charts using data from database created via code first - ASP.Net MVC

But, most likely, I got confused and mixed suggestions from different answers. In the comments of chart_script.js there is that hardcode that works pretty well.

If there is any additional information required please let me know and I will try to add it in to the question.

Model:

namespace MealProject.Models
{
    public partial class MealQuantity
    {
        public int MealQuantityId { get; set; }
        public int InitialQuantity { get; set; }
        public int RemainingQuantity { get; set; }
    }
}

Controller:

namespace MealProject.Controllers
{
    [Authorize]
    public class MainController : Controller
    {
        private DBContext _db;

        public MainController(DBContext context)
        {
            _db = context;
            if (User != null && AccountController.AdminConnect(_db, User.Claims.FirstOrDefault().Type, User.Claims.FirstOrDefault().Value).Result) { }
        }


[Route("/Chart")]
public IActionResult Chart()
{
    return View();
}

public IActionResult GetChart()
        {
            return Json(_db.MealQuantity
                .Select(p =>new {p.MealQuantityId, p.InitialQuantity, p.RemainingQuantity }));
        }

View:

@* Maybe we should try System.Windows.Forms.DataVisualization.Charting ?
    or https://dotnethighcharts.codeplex.com/
    or https://gionkunz.github.io/chartist-js/index.html
*@
<strong>Hope this works</strong>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="~/scripts/chart_script.js"></script>
<div id="chart_div"></div>

DBContext:

namespace MealProject.Models
{
    public partial class DBContext : DbContext
    {
        public DBContext(DbContextOptions<DBContext> options) : base(options) { }
        public virtual DbSet<MealQuantity> MealQuantity { get; set; }
        public virtual DbSet<Users> Users { get; set; }

    }
}

chart_script.js:

google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawLineColors);
function drawLineColors() {

    var data = new google.visualization.DataTable();

    data.addColumn('number', '@Model.MealQuantityId');
    data.addColumn('number', '@Model.InitialQuantity');
    data.addColumn('number', '@Model.RemainingQuantity');

    $.getJSON("@Url.Action('GetChart')", null, function (chartData) {
        $.each(chartData, function (i, item) {
            data.addRow(item.MealQuantity, item.InitialQuantity, item.RemainingQuantity);
        });


        var options = {
            title: 'Chart',
            hAxis: { title: '@Model.Chart', titleTextStyle: { color: 'red' } }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    });
}