Hi, that example in the video was a bit forward thinking, and I don't think there's currently a way to do this "out of the box", i.e. by just binding the control. What you have to do is listen to the statechange event and create a new DataView or DataTable and redraw the GeoChart manually. Unfortunately, I don't think this control is currently powerful enough to do the kind of averaging that needs to be done for this.
On Tuesday, October 9, 2012 11:46:08 PM UTC-4, UI wrote: > > Thanks. How can I link the two and simply add a year column. Looks good > otherwise? > > <html> > <head> > <script type='text/javascript' src='https://www.google.com/jsapi > '></script> > <script type='text/javascript'> > google.load('visualization', '1', {'packages': ['geochart']}); > google.setOnLoadCallback(drawRegionsMap); > > function drawRegionsMap() { > var data = google.visualization.arrayToDataTable([ > ['Country', 'Total Trade'], > ['United States', 385.3], > ['Japan', 297.8], > ['HK', 230.6], > ['South Korea', 207.2], > ['Taiwan', 145.4], > ['Germany', 142.4], > ['Australia', 88.1], > ['Malaysia', 74.2], > ['Brazil', 62.5], > ['India', 61.8], > ]); > > var options = {}; > > var chart = new > google.visualization.GeoChart(document.getElementById('chart_div')); > chart.draw(data, options); > }; > </script> > </head> > <body> > <div id="chart_div" style="width: 610px; height: 380px;"></div> > </body> > </html> > > <!-- > You are free to copy and use this sample in accordance with the terms of > the > Apache license (http://www.apache.org/licenses/LICENSE-2.0.html) > --> > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " > http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="content-type" content="text/html; charset=utf-8"/> > <title> > Google Visualization API Sample > </title> > <script type="text/javascript" src="http://www.google.com/jsapi > "></script> > <script type="text/javascript"> > google.load('visualization', '1.1', {packages: ['corechart', > 'controls']}); > </script> > <script type="text/javascript"> > function drawVisualization() { > var dashboard = new google.visualization.Dashboard( > document.getElementById('dashboard')); > > var control = new google.visualization.ControlWrapper({ > 'controlType': 'ChartRangeFilter', > 'containerId': 'control', > 'options': { > // Filter by the date axis. > 'filterColumnIndex': 0, > 'ui': { > 'chartType': 'LineChart', > 'chartOptions': { > 'chartArea': {'width': '90%'}, > 'hAxis': {'baselineColor': 'none'} > }, > // Display a single series that shows the closing value of > the stock. > // Thus, this view has two columns: the date (axis) and the > stock value (line series). > 'chartView': { > 'columns': [0, 3] > }, > // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000 > 'minRangeSize': 86400000 > } > }, > // Initial range: 2012-02-09 to 2012-03-20. > 'state': {'range': {'start': new Date(2012, 1, 9), 'end': new > Date(2012, 2, 20)}} > }); > > var chart = new google.visualization.ChartWrapper({ > 'chartType': 'CandlestickChart', > 'containerId': 'chart', > 'options': { > // Use the same chart area width as the control for axis > alignment. > 'chartArea': {'height': '80%', 'width': '90%'}, > 'hAxis': {'slantedText': false}, > 'vAxis': {'viewWindow': {'min': 0, 'max': 2000}}, > 'legend': {'position': 'none'} > }, > // Convert the first column from 'date' to 'string'. > 'view': { > 'columns': [ > { > 'calc': function(dataTable, rowIndex) { > return dataTable.getFormattedValue(rowIndex, 0); > }, > 'type': 'string' > }, 1, 2, 3, 4] > } > }); > > var data = new google.visualization.DataTable(); > data.addColumn('date', 'Date'); > data.addColumn('number', 'Stock low'); > data.addColumn('number', 'Stock open'); > data.addColumn('number', 'Stock close'); > data.addColumn('number', 'Stock high'); > > // Create random stock values, just like it works in reality. > var open, close = 300; > var low, high; > for (var day = 1; day < 121; ++day) { > var change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3) > - Math.cos(day * 0.7)) * 150; > change = change >= 0 ? change + 10 : change - 10; > open = close; > close = Math.max(50, open + change); > low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15; > low = Math.max(0, low); > high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15; > var date = new Date(2012, 0 ,day); > data.addRow([date, Math.round(low), Math.round(open), > Math.round(close), Math.round(high)]); > } > > dashboard.bind(control, chart); > dashboard.draw(data); > } > > > google.setOnLoadCallback(drawVisualization); > </script> > </head> > <body> > <div id="dashboard"> > <div id="chart" style='width: 915px; height: 300px;'></div> > <div id="control" style='width: 915px; height: 50px;'></div> > </div> > </body> > </html> > > On Wednesday, October 10, 2012 12:57:14 AM UTC+8, Sergey Grabkovsky wrote: >> >> Ah yes, that is a GeoChart combined with the >> ChartRangeFilter<https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter>. >> >> Unfortunately, there were a number of complications in getting it to work >> with the GeoChart out of the box. >> >> - Sergey >> >> >> On Tue, Oct 9, 2012 at 12:22 PM, UI <[email protected]> wrote: >> >>> Picture of the product is attached. From the developer conference in >>> 2011 (http://www.youtube.com/watch?v=-hcY5qbCP7I). >>> >>> >>> >>> >>> >>> On Tuesday, October 9, 2012 10:25:52 PM UTC+8, Sergey Grabkovsky wrote: >>>> >>>> Hello! >>>> >>>> You may be thinking of the Public Data >>>> Explorer<http://www.google.com/publicdata/explore?ds=z6409butolt8la_#!ctype=m&strail=false&bcs=d&nselm=s&met_s=gsd&scale_s=lin&ind_s=false&ifdim=country&hl=en_US&dl=en_US&ind=false>, >>>> >>>> which has this capability. If not, I'm curious to know what product you >>>> are >>>> thinking of, since there's nothing else that provides this functionality. >>>> I >>>> did find an example of someone doing this on their >>>> own<http://www.chrisdblumberg.com/unemployment/animated.html>, >>>> however, so maybe that will help. >>>> >>>> Best of luck, >>>> - Sergey >>>> >>>> On Saturday, October 6, 2012 11:51:00 PM UTC-4, UI wrote: >>>>> >>>>> I am trying to add a timeline to GEOmap. I know that this product was >>>>> in development by google's team but I wonder if it is released already. >>>>> >>>>> The map will show GDP and other variables in different regions over >>>>> time. >>>>> >>>>> Many thanks. >>>>> >>>> -- >>> You received this message because you are subscribed to the Google >>> Groups "Google Chart API" group. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msg/google-chart-api/-/dXlsXaF2HloJ. >>> >>> 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-chart-api?hl=en. >>> >> >> -- You received this message because you are subscribed to the Google Groups "Google Chart API" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-chart-api/-/RDLWUbEsHH0J. 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-chart-api?hl=en.
