GWT + Google Visualization API

[Vic]

Hi, please help me.

I want to show a tab panel with two tabs. Each tab must to draw a
piechart after the user select two dateboxes and push the button.
These pie charts take data from the database and the pie charts must
to change every time that the user push the button.

At this time I have the asynchronous methods wich return the data,
but I dont know :

1) where I must to draw the pie chart? maybe when i call a
asynchronous method inside the on succes method ? or maybe in the
asyncrhonous method I should return a variable which have the data
from database or I dont know if i should use a data provider?

2) How I can refresh the tabs (pie charts) without the tabs is redraw.

Thanks a lot

Vic..

[asgallant]

I don't use GWT, but assuming your data source returns a JSON representation of a DataTable object, then you could use something like this (I use jQuery, but you can accomplish the same thing using vanilla JS or other frameworks):

​google.load('visualization', '1.0', {'packages': ['corechart']});
google.setOnLoadCallback(init);

function init () {
    $('#myButton').click(function () {
        // get parameters to submit to data source
        var params;
        
        // get data w/ AJAX call
        $.ajax({
            url: '/path/to/data.source',
            data: params,
            type: json,
            success: function (json) {
                var data = new google.visualization.DataTable(json);
                var pie = new google.visualization.PieChart(document.getElementById('pie_1_div'));
                pie.draw(data, {/*options*/});
            }
        });
    });
}​​​ 

This will fetch data and redraw the chart every time the user clicks 'myButton'