Google 带有类别选择器和 SQL 数据库的图表

Question

我想绘制一个 google 图表，其中的数据来自 MS SQL 中的存储过程，并且还使用类别选择器。到目前为止，我的代码只显示一个空白页，我不知道错误在哪里。

存储过程return一个table看起来像这样

时间 |房间1 |房间2 |房间3 |房间 4

9:00 | 0 | 10 | 0 | 5

10:00| 15 | 2 | 20 | 0

11:00| 5 | 4 | 15 | 6

我的 aspx.cs 代码是：

    protected void Page_Load(object sender, EventArgs e)  
{  
    string ChartData = GetChartData();
    chart.Text=@"<script type='text/javascript'>
    google.load('visualization', '1.1', {packages: ['controls','corechart']});
    google.setOnLoadCallback(drawVisualization);

    function drawVisualization() {
        // Prepare the data
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Time');
        data.addColumn('string', 'Room');
        data.addRows(["+ChartData+@" ]);

        var options = { 
                    'title': 'Chart',            
                    'seriesType': 'bars',                               
        }; 

        var categoryPicker = new google.visualization.ControlWrapper({
            controlType: 'CategoryFilter',
            containerId: 'control2',
            options: {
                filterColumnLabel: 'Room',
                ui: {
                    labelStacking: 'vertical',
                    allowTyping: false,
                    allowMultiple: false,
                    height: 100
                }
            },
            state: {
                selectedValues: ['Room1']
            }
        });

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

        google.visualization.events.addListener(categoryPicker, 'statechange');

        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
        dashboard.bind(categoryPicker);
        chart.draw(data, options);  
    }   
    </script>";
}  

protected string GetChartData()  
{  

    string ChartData = string.Empty;    
    SqlConnection sqlCon = new SqlConnection("xxxx");
        string Cmdstring = "Select * from table";
        SqlCommand cmd  = new SqlCommand(Cmdstring,sqlCon);
        sqlCon.Open();

    SqlDataReader reader = cmd.ExecuteReader();
    while (reader.Read()){
        ChartData += "['" +reader["Time"].ToString()+"',"+reader["Room1"].ToString()+"',"+reader["Room2"].ToString()+"',"+reader["Room3"].ToString()+"',"+reader["Room4"].ToString()+ "],";
    }
    if(ChartData.Length >0){
        ChartData = ChartData.Substring(0, ChartData.Length -1);
    }
    return ChartData;  
}

我的 aspx 是

<head runat="server">  
<title>Charts Example</title>  
<script type="text/javascript" src="https://www.google.com/jsapi"></script>  
</head>  
<body>  

 <form id="form1" runat="server">
<div id="control2"></div> 
<div id="dashboard"></div> 
<div id="chart_div" style="width: 660px; height: 400px;"></div>  
 <asp:Literal ID="chart" runat="server"></asp:Literal>  

</form>

</body>

你能帮我找出错误吗？谢谢

Answer 1

我注意到几件事：

您还需要加载 corechart 库才能获得 ComboChart。

google.load('visualization', '1.1', {packages: ['controls','corechart']});

仪表板的代码缺少一些东西。确保您的 html 中有一个 ID 为 Dashboard 的 div（它丢失了），然后使用
```
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(categoryPicker);
```
您的列设置与您的数据不匹配。您需要拥有与数据中一样多的列，并且它们需要采用数字格式。

以下是我想象的页面在所有设置完成后的样子：

http://jsfiddle.net/0h62ugd4/

Google 带有类别选择器和 SQL 数据库的图表

Google Chart with Category Picker and SQL Database

c#

asp.net

bar-chart