Google Chart Tools从数据库填充

时间:2016-02-05 21:35:39

标签: javascript c# ajax asp.net-mvc google-visualization

我使用c#和asp.net MVC使用EF代码第一种方法制作了一个网站。我想用我的sql数据库中的数据填充Google图表。我看了一个复杂的视频解释这个,但它使用PHP,我需要使用c#。我有一个数据库表Event,它有两个属性用于表示可用的总票数,另一个用于表示仍然可用的数量。 我想制作一张图表,显示可用的总数和剩下的数字。

这是我到目前为止的观点

@model Site.Models.Event

@{
ViewBag.Title = "Details";
}
<head>  
 <script type="text/javascript"   src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 <title> Title </title>
 <script type="text/javascript">

    // Load the Visualization API and the piechart package.
    google.charts.load('current', { 'packages': ['corechart'] });
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {

        var chart, data;

        var serverData = $.ajax({
            url: 'data.json',
            type: 'json',
            context: document.getElementById('chart'),
            success: function (serverData) {
                data = new google.visualization.DataTable(serverData);
                chart = new google.visualization.ComboChart(this);
                chart.draw(data, { width: 400, height: 240 });
            }
        });
    }

 </script>
</head>
<body>
    <div id="chart" style="height: 500px; width: 900px;"></div>
</body>

如果有人可以帮我处理代码,我需要在控制器中编写以从数据库返回数据,我认为这需要是JSON结果,以及如何使用它我会非常感激。

0 个答案:

没有答案