Re: Gauges linked to geochart

[asgallant]

What is the problem you are seeing?  Skimming that code, it looks like you should get two gauges with values equal to the average of column 0 and column 2.  The only oddity that I see off the bat is the column 2 average is getting labeled with the column 1 label.

On Wednesday, November 14, 2012 9:37:25 PM UTC-5, John Rudolph wrote:

Still pretty new to visualizations. I have created this geochart with a couple of category filters: http://www.aml360.com/testDashboard.html. I am trying to add a couple of gauges based on columns 0 and 2 in the imbedded table. Tried to do the best I could by looking at some prior forum posts, but still don't quite have the savy to make it work for my data. Below is as far as I made it with the gauges. Where did I slip up? Thanks in advance for the help. I'm always blown away by the great responses on this forum.

 

    // set up a dataTable for the gauges
    var gaugeData = new google.visualization.DataTable();
    gaugeData.addColumn('string', 'Series');
    gaugeData.addColumn('number', 'Average');
   
    gauges = new google.visualization.ChartWrapper({
        chartType: 'Gauge',
        dataTable: gaugeData,
        containerId: 'gauges',
        options: {
            redFrom: 100,
            redTo: 150,
            yellowFrom: 50,
            yellowTo: 100,
            minorTicks: 25
        }
    });
   
    google.visualization.events.addListener(gauges, 'ready', onReady);
   
    function onReady() {
    }
   
    // set up event listener to draw the gauge when the dashboard is done
    google.visualization.events.addListener(dashboard, 'ready', function (e) {
        var view = geoChart.getDataTable();
        var group = google.visualization.data.group(view, [{
            column: 1,
            type: 'string',
            modifier: function () {
                // make them all the same for grouping
                return 0;
            }
        }], [{
            column: 0,
            type: 'number',
            label: view.getColumnLabel(0),
            aggregation: google.visualization.data.avg
        }, {
            column: 2,
            type: 'number',
            label: view.getColumnLabel(1),
            aggregation: google.visualization.data.avg
        }]);
       
        // clear the gaugeData table
        if (gaugeData.getNumberOfRows() > 0) {
            gaugeData.removeRows(0, gaugeData.getNumberOfRows());
        }
        // populate the gaugeData table
        for (var i = 1; i < group.getNumberOfColumns(); i++) {
            gaugeData.addRow([group.getColumnLabel(i), group.getValue(0, i)]);
        }
        gauges.draw();
    });

[John Rudolph]

Thanks for the quick response. The problem is that the 2 gauges are not showing up, although the geoMap and filters seem to work. Here is the dashboard with code for the gauges included: http://www.aml360.com/testDashboard.html. The gauges are supposed to show up in the gray column on the left, stacked on top of each other. Ideally the gauges will show averages for entire dataset, and then update when either a filter is applied, or a region on the geoMap is clicked.

Again, greatly appreciate all the help!

-John

[asgallant]

First, you call google.load twice and google.setOnLoadCallback twice - cut those down to one each.  Second, you need to create the dashboard before you set up the "ready" event handler that draws the gauges.  Third, the name of the dashboard variable has to be the same as what it used in the event handler (you named the variable "chart" but referenced "dashboard" for the event handler).  Here's a working version: http://jsfiddle.net/asgallant/psvpp/

[John Rudolph]

Perfect, thank you for the help!

-John

[asgallant]

You're welcome.

[John Rudolph]

I really appreciate the help received so far. I have built out a little further and have hit another snag that I hope I can get some help with. I am trying to set up a select listener for the geoChart, so that when the user clicks on a country it selects the country, and updates the gauges. As is the gauges update when the user selects from the category filter, but I'm hoping that I can get the gauges to also fire when the user selects a country. Dashboard is here: http://www.aml360.com/testDashboard.html.

[asgallant]

To make this easier, there is a simpler way to handle your gauges: drive them all off of one DataTable, but use the "view" option in each gauge to restrict it to a specific row in the data.  With that change, you only need one event handler for the dashboard's "ready" event and one for your GeoChart's "select" event.  Here's a working example: http://jsfiddle.net/asgallant/psvpp/1/

You may want to include a label for the gauges that says whether they are drawing the average value or the value for a country.  Also, since there is no indication of whether or not a country is selected in the GeoChart, it may be useful to clear the selection on the GeoChart after every select event is thrown (which would also eliminate the necessity of handling different lengths of the selection array).  Call geoChart.getChart().setSelection(null) to clear the selection.

[John Rudolph]

Thank you much. I knew there was an easier way to consolidate the gauges to pull off of 1 table, but I couldn't quite figure it out when I was putting it together. This is a much better way to do it. I would have never figured out the select event handler for the geoChart. I tried for ages, but didn't realize I needed an if statement in there.

-John

[asgallant]

You're welcome.