Как заполнить диаграммы Google, используя данные из базы данных, созданной сначала с помощью кода - ASP.Net MVC

Я хочу заменить жестко закодированные данные в приведенном ниже коде данными из моей базы данных, которые я создал с использованием подхода Code First.

Тем не менее, я буквально понятия не имею, как, потому что я все еще довольно плохо знаком с этим. Диаграмма Google прекрасно работает с жестко закодированными значениями, но на этом мое понимание заканчивается, как приблизиться к нему, используя реальные данные из моей базы данных. Есть много учебников (о Code First) о том, как это сделатьиспользуя жесткий код данные, но нет наиспользуя данные из базы данных.

Может ли кто-нибудь предоставить мне подробный подход о том, как это сделать, чтобы я мог лучше понять это? Я очень ценю это и спасибо заранее!

Если потребуется дополнительная информация, пожалуйста, дайте мне знать, и я постараюсь добавить ее в вопрос.

Модель:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace HealthHabitat.Models
{
    public class ProductModel
    {
        public string YearTitle { get; set; }
        public string SaleTitle { get; set; }
        public string PurchaseTitle { get; set; }
        public Product ProductData { get; set; }
    }
    public class Product
    {
        public string Year { get; set; }
        public string Purchase { get; set; }
        public string Sale { get; set; }
    }
}

контроллер:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HealthHabitat.Models;

namespace HealthHabitat.Controllers
{
    public class ChartController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            ProductModel objProductModel = new ProductModel();
            objProductModel.ProductData = new Product();
            objProductModel.ProductData = GetChartData();
            objProductModel.YearTitle = "Year";
            objProductModel.SaleTitle = "Sale";
            objProductModel.PurchaseTitle = "Purchase";
            return View(objProductModel);

        }
        /// <summary>
        /// Code to get the data which we will pass to chart
        /// </summary>
        /// <returns></returns>
        public Product GetChartData()
        {
            Product objproduct = new Product();
            /*Get the data from databse and prepare the chart record data in string form.*/
            objproduct.Year = "2009,2010,2011,2012,2013,2014";
            objproduct.Sale = "2000,1000,3000,1500,2300,500";
            objproduct.Purchase = "2100,1400,2900,2400,2300,1500";
            return objproduct;
        }
    }
}

Посмотреть:

 @model HealthHabitat.Models.ProductModel

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        // Create and populate the data table.
        var years = [@Model.ProductData.Year];
        var sales = [@Model.ProductData.Sale];
        var Purchase = [@Model.ProductData.Purchase];

        var data = new google.visualization.DataTable();
        data.addColumn('string', '@Model.YearTitle');
        data.addColumn('number', '@Model.SaleTitle');
        data.addColumn('number', '@Model.PurchaseTitle');
        for (i = 0; i < years.length; i++) {
            data.addRow([years[i].toString(), sales[i], Purchase[i]]);
        }
        var options = {
            title: 'Sale and Purchase Compare',
            hAxis: { title: '@Model.YearTitle', titleTextStyle: { color: 'red'} }
        };

        var chart = newgoogle.visualization.ColumnChart(document.getElementById('chartdiv'));
        chart.draw(data, options);
    }
</script>
<div id="chartdiv" style="width: 500px; height: 300px;">
</div>

Ответы на вопрос(2)

Ваш ответ на вопрос