Trying to update google visualization using jquery

Question

I am relatively inexperienced, so please bear with me.

I am developing a simple toolbar using the Google visualization API. I am developing at vb.net. I have an annotated timeline, intensity map and a set of tables on my apsx.

What I'm trying to do is update the intensity map and tables based on the date range that the user selects using the Annotated Timeline tool.

I was hoping to update only these visualizations without a full page load. Apparently, a great way to do this is to split the visualizations into standalone aspx pages and use jQuery to “load” them into a div.

I say, apparently, because it does not work. When I try to update an aspx containing Google visualization using jQuery, I get the message “Downloading data from www.google.com ...” in the browser and it just works continuously and never returns. I ran this from an experienced developer, and he was at a dead end, but thought it was a conflict between the Google APIs and jQuery.

Any advice, advice, alternative solutions are welcome!

Answer 1

just coded something that might help you. Tested for BarChart, ColumnChart, LineChart and AreaChart, it works well for me (it will not work correctly for PieCharts by design).

Chief Designer 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;
    };
}

( )

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]];

, script , .

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'});

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

, :)

, script , .

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

/* script here */

});