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]> 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]. > 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 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.
