Trying to update a google visualization using jquery

Question

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!

Thanks,

Mark in Ann Arbor

Answer 1

Hello, 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 */

});

Answer 2

Thanks. I haven't had a chance to review and try this, but I really appreciate your advice.

Answer 3

Hi Mushex Antaranian, your sample code is brilliant. But can you show me how to use with JSONObject as per sample from google visualization using JSON :

var JSONObject = {cols:[], rows:[]};
var charts = new google.visualization.DataTable(JSONObject);

Thanks in advanced.