Update Google visualization on the fly

Question

I am currently creating a google chart through the Google visualization, and I want to be able to update or update this chart with the click of a button. I tried many different ways to do this, but none of them work, so I'm looking for any suggestions that anyone can do. My current platform is ASP.net (with C #), and google stuff is written in javascript / jquery (obviously). Thanks!

Answer 1

Gviz has the ability to populate charts with JSON data, so you can do this with jquery quite simply by contacting your server to get a new dataset by returning JSON and then passing it to which it draws your charts.

Your jquery / javascript wil looks something like this:

    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>

Regarding the proper formatting of your JSON response, there are several libraries that will help you, although I don't know anything specifically in the languages ​​you mentioned. Here is one from python , for example.

If you are struggling, you can simply unload all your entries in the array as follows:

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

and use google.visualization.arrayToDataTable to interpret it when it returns from your server as JSON.

Hope this helps.