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 On Monday, November 19, 2012 5:38:38 AM UTC+13, asgallant wrote: > > 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/-/T-9HzmQ43FYJ. 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.
