Trying to update a google visualization using jque

I'm relatively inexperienced, so please bear with me.

I'm developing a simple dashboard using the Google visualization API. I'm developing in vb.net. I have the Annotated Timeline, the Intensity Map, and a set of tables on my apsx.

What I am trying to do is update the Intensity Map and tables based on the date range the user selects using the Annotated Timeline tool.

I was hoping to update only these visualizations without doing a full page load. Apparently, a great way to do this is to separate the visualizations into self-contained aspx pages and use jQuery to "load" them into a div.

I say apparently, as this is not working. When I try to update an aspx containing a Google visualization using jQuery, I get the message "Loading data from www.google.com..." in the browser and it just runs continuously and never returns. I ran this by an experienced developer and he was stumped, but thought must be a conflict between the google API and jQuery.

Any tips, advice, alternative solutions are greatly appreciated!

just coded something that can help you. Tested for BarChart, ColumnChart, LineChart and AreaChart, for me works well (by design wouldn't work correctly for PieCharts).

Main constructor code:

function Charts (options){
    var self = this;
    self.chart = [];
    self.dataTable = new google.visualization.DataTable();
    self.settings = $.extend({
        colors:['#98D8F4','#E85500','#B3CF2F', '#FEB800', '#FFA1C5', '#D984FF', '#DD9D75'],
        width: 960, height: 600,
    }, options);
    self.add = function(type, element){
        self.chart.push({
            element: $(element),
            o: new google.visualization[type]($(element)[0]),
            draw: function(dataTable, options){
                this.element.html('');
                this.o.draw(dataTable, options);
            }
        });
    };
    self.draw = function(options){
        var settings = $.extend({}, this.settings, options);
        $.each(self.chart, function(i, chart){
            chart.draw(self.dataTable, settings)
        })
    };
    self.parseData = function(labels, legends, data){
        var countRows = data[0].length;
        self.dataTable.addColumn('string', 'Name');
        $.each(legends, function(i, legend){
            self.dataTable.addColumn('number', legend);
        })
        self.dataTable.addRows(countRows);
        $.each(labels, function(i, label){
            self.dataTable.setValue(i, 0, label);
            $.each(data, function(k, entry){
                self.dataTable.setValue(i, k+1, data[k][i]);
            })
        })
        return self.dataTable;
    };
}

You can simply pass data as array to construct charts (you must always parse data before call draw method)

var labels = [ "Kaspersky","Symantec","G-Data","Avira" ],
    legends = [ "Antivirensoftware (kostenpflichtig)","Antivirensoftware (kostenlos)","Internetsecurity (kostenpflichtig)","Internetsecurity (kostenlos)","Sonstiges, keine Angabe","Beta-Test KIS 2010", "Something Else" ],
    data = [ [46,4,7,33],[3,1,2,38],[42,12,14,7],[2,0,1,1],[43,8,14,18],[4,3,0,1],[1,2,4,2]];

besides that script is a little complicated, you can draw charts easily.

var charts = new Charts();
charts.parseData(labels, legends, data);
charts.add('ColumnChart', '#column-chart');
charts.add('BarChart', '#bar-chart');
charts.draw({title: 'Antivirus Comparison Chart', titleY:'Points'});

and refresh easily

charts.parseData(otherLabels, otherLegends, otherData);
charts.draw({title: 'Antivirus Comparison Chart with Other Data', titleY:'Points'});

hope it'll help you :)

Oh, and don't forget load libraries and include this script inside document ready function, e.g.

google.load("jquery", "1.3.2");
google.load('visualization', '1', {'packages':['piechart','barchart','columnchart']});
google.setOnLoadCallback(function() {

/* script here */

});