Как заполнить диаграммы 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>