You're more than welcome. Good luck with your Masters
On Tue, Nov 22, 2011 at 1:10 AM, JennieB <jennie.ba...@gmail.com> wrote: > Hello again, > > Thank you for the tip, I will certainly have a look at the debugger. > > The code worked perfectly and I can see where I went wrong now! It is > very satisfying when it all works as it should! > > Thank you once again, my workload for my Masters Degree is very hectic > at the moment, so appreciate your help more than know! > > Best wishes, > > Jennie > > On Nov 20, 2:10 pm, Roni Biran <roni.bi...@gmail.com> wrote: > > Hi there, > > > > Firstly you're more than welcome. > > Secondly, I'm not from Google, but a regular developer and user such as > > yourself. You will find many such as me in this community. > > Thirdly, in regard to your problem..... you have some JavaScript syntax > > issues. I fixed them for you, however (and for the future) you might want > > to use a JavaScript debugger. Google Chrome is provided with a built-in > > developer tools. Just press F12 and play with it. > > > > Amy way, I believe that this will do the trick for now. > > If you have larger datatable, you might want to use a spreadsheet and > > integrate it directly into the code using the query language (which will > > improve this script version as well - > http://code.google.com/apis/ajax/playground/?type=visualization#using... > > ) > > > > <html> > > <head> > > <meta http-equiv="content-type" content="text/html; charset=utf-8"/> > > <title>Worldwide Production and Consumption of Non-Ferrous > > Metals</title> > > > > <style type="text/css"> > > body { > > background-color:LightSteelBlue ; > > color:Black; > > } > > > > h1 {text-align:center;} > > > > p.one { > > text-align:justify; > > background-color:#D8E2EE; > > border-style:double; > > border-width:3px; > > border-color:Black; > > padding-top:10px; > > padding-bottom:10px; > > padding-right:10px; > > padding-left:10px; > > } > > > > .center { > > margin:auto; > > width:80%; > > } > > </style> > > > > <script type='text/javascript' src='https://www.google.com/jsapi > > '></script> > > <script type='text/javascript'> > > > > google.load('visualization', '1', {'packages': ['geomap']}); > > google.setOnLoadCallback(drawMaps); > > > > var data; > > var options = { > > dataMode: 'regions', > > width: 750, > > height: 380, > > colors: [0xDB4D4D, 0xCC0000, 0x7A0000, 0x3D0000] > > } > > > > function drawMaps() { > > // create data table > > data = new google.visualization.DataTable(); > > data.addColumn('string', 'Country'); > > data.addColumn('string', 'Metal'); > > data.addColumn('number', 'Metal Production (Thousand Tonnes)'); > > data.addColumn('number', 'Metal Consumption (Thousand Tonnes)'); > > > > // Copper > > data.addRow(['KR', 'Copper', 535.2, 839.1]); > > data.addRow(['Poland', 'Copper', 539.1, 0]); > > data.addRow(['India', 'Copper', 632.4, 428.2]); > > data.addRow(['Zambia', 'Copper', 723.3, 0]); > > data.addRow(['Germany', 'Copper', 723.8, 1273.5]); > > data.addRow(['Russia', 'Copper', 864.0, 452.7]); > > data.addRow(['United States', 'Copper', 1212.0, 1770.9]); > > data.addRow(['Japan', 'Copper', 1566.0, 1045.0]); > > data.addRow(['Chile', 'Copper', 3916.1, 0]); > > data.addRow(['China', 'Copper', 4525.0, 7527.8]); > > data.addRow(['Brazil', 'Copper', 0, 443.7]); > > data.addRow(['Taiwan', 'Copper', 0, 539.8]); > > data.addRow(['Italy', 'Copper', 0, 456.0]); > > > > // Aluminium > > data.addRow(['United States', 'Aluminium', 1706.9, 4489.2]); > > data.addRow(['China', 'Aluminium', 16701.6, 16271.0]); > > data.addRow(['United Arab Emirates', 'Aluminium', 987.3, 0]); > > data.addRow(['Bahrain', 'Aluminium', 858.0, 0]); > > data.addRow(['India', 'Aluminium', 1591.5, 1549.5]); > > data.addRow(['Norway', 'Aluminium', 1056.0, 0]); > > data.addRow(['Brazil', 'Aluminium', 1528.8, 965.7]); > > data.addRow(['Australia', 'Aluminium', 1901.1, 0]); > > data.addRow(['Canada', 'Aluminium', 2977.4, 0]); > > data.addRow(['Russia', 'Aluminium', 3687.1, 685.0]); > > data.addRow(['Japan', 'Aluminium', 0, 2090.4]); > > data.addRow(['Germany', 'Aluminium', 0, 1861.4]); > > data.addRow(['KR', 'Aluminium', 0, 1236.5]); > > data.addRow(['Italy', 'Aluminium', 0, 828.9]); > > data.addRow(['Turkey', 'Aluminium', 0, 657.6]); > > > > // Lead > > data.addRow(['China', 'Lead', 3708.3, 3716.6]); > > data.addRow(['United States', 'Lead', 1230.5, 1432.5]); > > data.addRow(['Germany', 'Lead', 418.3, 347.8]); > > data.addRow(['United Kingdom', 'Lead', 301.7, 203.5]); > > data.addRow(['Japan', 'Lead', 256.6, 210.9]); > > data.addRow(['Mexico', 'Lead', 258.0, 0]); > > data.addRow(['Canada', 'Lead', 288.9, 0]); > > data.addRow(['Australia', 'Lead', 234.2, 0]); > > data.addRow(['KR', 'Lead', 207.3, 267.1]); > > data.addRow(['Italy', 'Lead', 175.2, 278.9]); > > data.addRow(['Spain', 'Lead', 0, 236.2]); > > data.addRow(['India', 'Lead', 0, 179.5]); > > data.addRow(['Brazil', 'Lead', 0, 175.4]); > > > > // Nickel > > data.addRow(['Russia', 'Nickel', 242.1, 0]); > > data.addRow(['Japan', 'Nickel', 164.7, 180.7]); > > data.addRow(['Canada', 'Nickel', 82.8, 0]); > > data.addRow(['China', 'Nickel', 349.0, 512.4]); > > data.addRow(['Australia', 'Nickel', 93.1, 0]); > > data.addRow(['Norway', 'Nickel', 91.0, 0]); > > data.addRow(['Colombia', 'Nickel', 49.5, 0]); > > data.addRow(['New Caledonia', 'Nickel', 39.1, 0]); > > data.addRow(['Finland', 'Nickel', 44.6, 37.2]); > > data.addRow(['South Africa', 'Nickel', 40.1, 41.7]); > > data.addRow(['United States', 'Nickel', 0, 126.3]); > > data.addRow(['Taiwan', 'Nickel', 0, 82.5]); > > data.addRow(['Germany', 'Nickel', 0, 99.8]); > > data.addRow(['KR', 'Nickel', 0, 92.9]); > > data.addRow(['Italy', 'Nickel', 0, 74.4]); > > data.addRow(['Spain', 'Nickel', 0, 39.3]); > > > > // Tin > > data.addRow(['China', 'Tin', 142.1, 149.1]); > > data.addRow(['Indonesia', 'Tin', 64.8, 0]); > > data.addRow(['Peru', 'Tin', 36.5, 0]); > > data.addRow(['Thailand', 'Tin', 21.3, 0]); > > data.addRow(['Malaysia', 'Tin', 38.9, 0]); > > data.addRow(['Bolivia', 'Tin', 14.9, 0]); > > data.addRow(['Brazil', 'Tin', 11.0, 10.3]); > > data.addRow(['Belgium', 'Tin', 10.1, 0]); > > data.addRow(['India', 'Tin', 3.6, 9.4]); > > data.addRow(['Vietnam', 'Tin', 3.6, 0]); > > data.addRow(['United States', 'Tin', 0, 32.1]); > > data.addRow(['Japan', 'Tin', 0, 35.7]); > > data.addRow(['Germany', 'Tin', 0, 18.3]); > > data.addRow(['Taiwan', 'Tin', 0, 11.8]); > > data.addRow(['KR', 'Tin', 0, 18.5]); > > data.addRow(['France', 'Tin', 0, 5.5]); > > data.addRow(['Netherlands', 'Tin', 0, 5.5]); > > > > filterAndDraw('Copper'); > > } > > > > function filterAndDraw(metalName) { > > if (typeof metalName != 'string' && metalName != undefined) > > metalName = metalName.value; > > document.getElementById('metalNameString').innerHTML = metalName; > > var filteredData = new google.visualization.DataView(data); > > filteredData.setRows(filteredData.getFilteredRows([{ column: 1, > > value: metalName}])); > > > > drawMap(filteredData); > > drawMap2(filteredData); > > } > > > > function drawMap(filteredData) { > > var view = new google.visualization.DataView(filteredData); > > view.setRows(view.getFilteredRows([{ column: 3, minValue: 1}])); > > view.hideColumns([1, 2]); > > > > var container = document.getElementById('map_canvas1'); > > var geomap = new google.visualization.GeoMap(container); > > geomap.draw(view, options); > > } > > > > function drawMap2(filteredData) { > > var view = new google.visualization.DataView(filteredData); > > view.setRows(view.getFilteredRows([{ column: 2, minValue: 1}])); > > view.hideColumns([1, 3]); > > > > var container = document.getElementById('map_canvas2'); > > var geomap = new google.visualization.GeoMap(container); > > geomap.draw(view, options); > > } > > > > </script> > > </head> > > > > <body> > > <div id="my_title"><h1>Worldwide Production & Consumption of > > Non-Ferrous Metals <span id="metalNameString"></span></h1></div> > > <div class="center"> > > <p class="one"> > > This web page has been designed to help people understand the > > fluctuation of the production and consumption of non-ferrous metals > > worldwide. > > <br/>Instructions: > > <br/>The first map displays the top ten producing countries > for > > each of the non-ferrous metals. Select which non-ferrous metal you would > > like to view from the drop down list and the results will be displayed on > > the map. Try hovering over the highlighted countries - this will show > you > > which country it is and how much of the metal was produced in 2010. > > <br/>The second map displayes the top ten consuming countries > > for each of the non-ferrous metals. You can view each metal in exactly > the > > same way as the first map and compare the differences.<br/> > > </p> > > </div> > > > > <div style="position: absolute; left: 50px; top: 350px; padding:1em;" > > id="map_canvas1"></div> > > <div style="position: absolute; left: 50px; top: 800px; padding:1em;" > > id="map_canvas2"></div> > > > > <div style="position: absolute; left: 50px; top: 350px; padding:1em;" > > id='map_canvas1'></div> > > <div style="position: absolute; left: 50px; top: 800px; padding:1em;" > > id='map_canvas2'></div> > > > > <div style="position: absolute; left: 900px; top: 350px; > height:400px; > > width: 200px; padding: 1em;" id='form'> > > <b>Filter Metal</b> > > <select onchange="filterAndDraw(this)"> > > <option value="Aluminium">Aluminium</option> > > <option value="Copper" selected>Copper</option> > > <option value="Lead">Lead</option> > > <option value="Nickel">Nickel</option> > > <option value="Tin">Tin</option> > > </select> > > </div> > > > > </body> > > </html> > > > > Good luck, > > > > > > > > > > > > > > > > On Sun, Nov 20, 2011 at 7:01 PM, JennieB <jennie.ba...@gmail.com> wrote: > > > Hi there, > > > > > Thank you very much for taking the time to help me and for writing out > > > that code. > > > > > I have just spent some time going through it and I think I understand > > > how it is all supposed to work. So I have added the rest of my data > > > and added your code. Unfortunately I cannot get it to work and I'm > > > not sure why. I've had a good look through but can't spot it. > > > > > This is what my code looks like now: > > > > > <html> > > > <head> > > > <meta > > > > ... > > > > read more ยป > > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To post to this group, send email to > google-visualization-api@googlegroups.com. > To unsubscribe from this group, send email to > google-visualization-api+unsubscr...@googlegroups.com. > For more options, visit this group at > http://groups.google.com/group/google-visualization-api?hl=en. > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to google-visualization-api@googlegroups.com. To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
