在MVC应用程序中使用SQL数据库在Google图表上显示数据
我想在下面创建Google图表,但我想使用现有sql数据库中的datetime值,而不是这些硬编码值.我该怎么办?
I want to create the google chart below but i want to use datetime values from an existing sql database instead of these hard coded values. How do I do this?
控制器(获取日期列并将数据解析为json对象,然后传递给视图)
Controller (gets the date columns and parses the data into a json abject and gets passed to view)
public ActionResult Data1(int abs)
{
db.Configuration.ProxyCreationEnabled = false;
var seach = (from e in db.GraphDatas
where e.SessionID == abs
select new CoinModel { StartTime = e.Session.StartTime, EndTime = e.Session.EndTime });
return Json(seach.ToList(), JsonRequestBehavior.AllowGet);
}
查看(不确定在这里做什么)
View (not sure what to do here)
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['timeline'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable({
cols: [
{ id: 'Session', label: 'Session', type: 'int' },
{ id: 'start', label: 'Season Start Date', type: 'date' },
{ id: 'end', label: 'Season End Date', type: 'date' }
],
}
rows: [
{ c: [{ v: 'Baltimore Ravens' }, { v: 'Date(2000, 8, 5)' }, { v: 'Date(2001, 1, 5)' }] },
{ c: [{ v: 'New England Patriots' }, { v: 'Date(2001, 8, 5)' }, { v: 'Date(2002, 1, 5)' }] },
{ c: [{ v: 'Tampa Bay Buccaneers' }, { v: 'Date(2002, 8, 5)' }, { v: 'Date(2003, 1, 5)' }] },
{ c: [{ v: 'New England Patriots' }, { v: 'Date(2003, 8, 5)' }, { v: 'Date(2004, 1, 5)' }] },
{ c: [{ v: 'New England Patriots' }, { v: 'Date(2004, 8, 5)' }, { v: 'Date(2005, 1, 5)' }] },
{ c: [{ v: 'Pittsburgh Steelers' }, { v: 'Date(2005, 8, 5)' }, { v: 'Date(2006, 1, 5)' }] },
{ c: [{ v: 'Indianapolis Colts' }, { v: 'Date(2006, 8, 5)' }, { v: 'Date(2007, 1, 5)' }] },
{ c: [{ v: 'New York Giants' }, { v: 'Date(2007, 8, 5)' }, { v: 'Date(2008, 1, 5)' }] },
{ c: [{ v: 'Pittsburgh Steelers' }, { v: 'Date(2008, 8, 5)' }, { v: 'Date(2009, 1, 5)' }] },
{ c: [{ v: 'New Orleans Saints' }, { v: 'Date(2009, 8, 5)' }, { v: 'Date(2010, 1, 5)' }] },
{ c: [{ v: 'Green Bay Packers' }, { v: 'Date(2010, 8, 5)' }, { v: 'Date(2011, 1, 5)' }] },
{ c: [{ v: 'New York Giants' }, { v: 'Date(2011, 8, 5)' }, { v: 'Date(2012, 1, 5)' }] },
{ c: [{ v: 'Baltimore Ravens' }, { v: 'Date(2012, 8, 5)' }, { v: 'Date(2013, 1, 5)' }] },
{ c: [{ v: 'Seattle Seahawks' }, { v: 'Date(2013, 8, 5)' }, { v: 'Date(2014, 1, 5)' }] }
]
});
var options = {
height: 450,
timeline: {
groupByRowLabel: true
}
};
var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
您快到了!现在,您将不得不在剃刀代码中吐出一个字符串,该字符串将混入您的Google统计信息代码中.
You're almost there! Now you will have to spit out a string in your razor code that will be mixed into your google stat code.
您可以通过在例如Viewbag中传递行信息来实现这一点. 因此,在您的控制器中,您需要将其放入控制器中:
You'll achieve that by passing in your row information in for instance a Viewbag. So in your controller you will put this in your controller :
ViewBag.FootballTeams = "{ c: [{ v: 'Baltimore Ravens' " etc.
在剃须刀中:
rows: [
@Html.Raw(ViewBag.FootballTeams)
]