在MVC应用程序中使用SQL数据库在Google图表上显示数据 [英] Displaying Data on Google Chart Using SQL Database in MVC Application

问题描述

我想在下面创建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)
]

这篇关于在MVC应用程序中使用SQL数据库在Google图表上显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！