即时刷新Google Visualization

时间:2011-11-29 14:48:37

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

我目前正通过谷歌可视化创建谷歌图表,我希望能够通过点击按钮刷新/更新此图表。我已经尝试了很多不同的方法来做到这一点,但没有一个工作,所以我正在寻找任何人可以做出的任何建议。我目前的平台是ASP.net(带有C#),google的东西是用javascript / jquery编写的(显然)。谢谢!

1 个答案:

答案 0 :(得分:1)

Gviz可以选择使用JSON数据填充图表,因此,您只需通过调用服务器获取一组新数据,让它返回JSON,然后将其传递给绘制图表的功能。

你的jquery / javascript看起来像这样:

    function drawMyChart(data) {
        // stuff to draw chart using the contents of data
        // data should be Gviz Data Table in JSON format
        // your server needs to output this
        var dt = new google.visualization.DataTable(data)
        // rest of your stuff, just like standard gviz
    }

    function makeAjaxCall() {
        $.ajax({
            url: '/path/to/data/json',
            sucess: drawMyChart(a),
            dataType: 'json' // this is important, have it interpreted as json
        });
    }
// html somewhere
<input type='button' onclick='makeAjaxCall()'>Go</input>

关于正确格式化你的JSON响应,有几个库可以帮助你,虽然我不知道你提到的语言有什么具体的。例如,这里是python中的一个。

如果您正在苦苦挣扎,您可以按如下方式将所有条目转储到数组中:

  [[name, age],[john, 25],[paul, 20]]

并使用google.visualization.arrayToDataTable解释它从服务器以JSON格式返回时。

希望有所帮助。