Displaying Data on Google Chart Using SQL Database

问题:

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?

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>

回答1:

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.

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.

And in your razor :

rows: [
   @Html.Raw(ViewBag.FootballTeams)
]