http://jsfiddle.net/asgallant/Fs3Hb/ seems to provide a good solution. I can't get it to load using html on iweb. Any suggestion to turn java to html to post using iweb?
On Wednesday, October 10, 2012 10:18:15 PM UTC+8, Sergey Grabkovsky wrote: > > 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/-/kREQffgmJ4wJ. 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.
