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. On Sunday, November 18, 2012 5:02:11 AM UTC-5, John Rudolph wrote: > > 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. > > > On Friday, November 16, 2012 9:29:00 AM UTC+13, asgallant wrote: >> >> You're welcome. >> >> On Thursday, November 15, 2012 3:24:06 PM UTC-5, John Rudolph wrote: >>> >>> Perfect, thank you for the help! >>> >>> -John >>> >>> On Friday, November 16, 2012 7:20:01 AM UTC+13, asgallant wrote: >>>> >>>> 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/ >>>> >>>> On Thursday, November 15, 2012 3:21:09 AM UTC-5, John Rudolph wrote: >>>>> >>>>> 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 >>>>> >>>>> On Thursday, November 15, 2012 5:30:00 PM UTC+13, asgallant wrote: >>>>>> >>>>>> 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(); >>>>>>> }); >>>>>>> >>>>>> -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/9hx7xD-7MawJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
