http://jsfiddle.net/asgallant/86ZA3/1/ will work perfectly but I still do not know how to link to external data or even simply input the data.
Thanks, Marcel On Monday, October 22, 2012 9:40:57 PM UTC+8, Sergey Grabkovsky wrote: > > I'm not sure what you mean by "turn java to html." There is no Java code > in the example you pointed to, and if there was there is no way to convert > Java to HTML. There is JavaScript there, but there is no way to convert > that to HTML either. try putting the JavaScript code in <script></script> > tags, though, and that should make it work in HTML. Alternatively, you can > put the JavaScript in a separate .js file and linking to it as outlined > here <http://www.hypergurl.com/jsfiles.html>. > > - Sergey > > > On Sun, Oct 21, 2012 at 10:07 AM, UI <[email protected] <javascript:>>wrote: > >> 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<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<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<http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> >>>> "> >>>> <html xmlns="http://www.w3.org/1999/**xhtml<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<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<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<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 google-chart-a...@** >>>>>> googlegroups.com. >>>>>> For more options, visit this group at http://groups.google.com/** >>>>>> group/google-chart-api?hl=en<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]<javascript:> >> . >> To unsubscribe from this group, send email to >> [email protected] <javascript:>. >> >> 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/-/JAjW-HvSFnUJ. 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.
