Hi there, Thank you very much for your help! Your instructions worked perfectly!
In terms of the second part, maybe I can explain it better if I tell you what it is I'm trying to actually do. I want to compare the top 10 largest metal producing countries and the top 10 largest metal consuming countries (hence having two maps). I have 5 different metals to use as comparisons for each one. So, when you select a metal from the drop down list the map will highlight the top 10 countries for that metal. Select another metal and the view will change on that map. I have two drop down lists - one for production, another for consumption to relate to each map. The question is how do I go about doing this so when a selection is made it calls the relevant array of data? I hope that makes more sense, I have been working on this all day and quite tired! Thank you once again! Jen On Nov 19, 7:00 pm, Roni Biran <[email protected]> wrote: > Ok, > > Here what you did wrong.... > 1. you cannot use "google.setOnLoadCallback(drawMap);" more than once.... > you have nothing to do with it. nor the "google.load" function. > > write the following to call both functions: > > google.load('visualization', '1', {'packages': ['geomap']}); > google.setOnLoadCallback(drawMaps); > > function drawMaps() { > drawMap(); > drawMap2(); > > } > > 2. you have only one div element for the maps. have two and set each > drawing function to be attached to it > <div id='map_canvas1'></div> > <div id='map_canvas2'></div> > > now, as for the other part of your project (the drop down lists), I didn't > understand what you want to do with it. can you explain in more details? > > good luck, > > > > > > > > On Sat, Nov 19, 2011 at 7:18 PM, JennieB <[email protected]> wrote: > > Hi there, > > > I'm a student and I am exploring the use of Geomaps for a project I am > > currently doing. But with not a huge amount of coding knowledge I > > have reached a dead end and I am hoping someone might be able to help > > me. > > > Firstly, on my web page I wish to show two Geomaps, one above the > > other. I can't work out how to do this. > > > Secondly, I have a drop down list which the user can select from. > > When an option is chosen, I would like the Geomap to display the > > relevant data for that option. I wondered if using an if statement > > would be the way to go, or to use the dashboard api, or if it is > > possible at all? > > > I really appreciate any advice you can give me as I'm feeling pretty > > lost! > > > Jen. > > > Here is a copy of my code so far: > > > <html> > > <head> > > <meta http-equiv="content-type" content="text/html; charset=utf-8"/ > > > <title>Worldwide Production and Consumption of Non-Ferrous Metals</ > > title> > > > <script type='text/javascript' src='https://www.google.com/jsapi'></ > > script> > > <script type='text/javascript'> > > > //Copper Production Map > > google.load('visualization', '1', {'packages': ['geomap']}); > > google.setOnLoadCallback(drawMap); > > > function drawMap() { > > var data = new google.visualization.DataTable(); > > data.addRows(10); > > data.addColumn('string', 'Country'); > > data.addColumn('number', 'Copper Production (Thousand Tonnes)'); > > data.setValue(0, 0, 'KR'); > > data.setValue(0, 1, 535.2); > > data.setValue(1, 0, 'Poland'); > > data.setValue(1, 1, 539.1); > > data.setValue(2, 0, 'India'); > > data.setValue(2, 1, 632.4); > > data.setValue(3, 0, 'Zambia'); > > data.setValue(3, 1, 723.3); > > data.setValue(4, 0, 'Germany'); > > data.setValue(4, 1, 723.8); > > data.setValue(5, 0, 'Russia'); > > data.setValue(5, 1, 864.0); > > data.setValue(6, 0, 'United States'); > > data.setValue(6, 1, 1212.0); > > data.setValue(7, 0, 'Japan'); > > data.setValue(7, 1, 1566.0); > > data.setValue(8, 0, 'Chile'); > > data.setValue(8, 1, 3916.1); > > data.setValue(9, 0, 'China'); > > data.setValue(9, 1, 4525.0); > > > var options = {}; > > options['dataMode'] = 'regions'; > > options['width'] = '750px'; > > options['height'] = '420px'; > > options['colors'] = [0xDB4D4D,0xCC0000,0x7A0000,0x3D0000] > > > var container = document.getElementById('map_canvas'); > > var geomap = new google.visualization.GeoMap(container); > > geomap.draw(data, options); > > }; > > > //Copper Consumption Map > > google.load('visualization', '1', {'packages': ['geomap']}); > > google.setOnLoadCallback(drawMap2); > > > function drawMap2() { > > var data = new google.visualization.DataTable(); > > data.addRows(10); > > data.addColumn('string', 'Country'); > > data.addColumn('number', 'Copper Consumption (Thousand > > Tonnes)'); > > data.setValue(0, 0, 'Brazil'); > > data.setValue(0, 1, 443.7); > > data.setValue(1, 0, 'India'); > > data.setValue(1, 1, 428.2); > > data.setValue(2, 0, 'Taiwan'); > > data.setValue(2, 1, 539.8); > > data.setValue(3, 0, 'Russia'); > > data.setValue(3, 1, 452.7); > > data.setValue(4, 0, 'Italy'); > > data.setValue(4, 1, 456.0); > > data.setValue(5, 0, 'KR'); > > data.setValue(5, 1, 839.1); > > data.setValue(6, 0, 'Japan'); > > data.setValue(6, 1, 1045.0); > > data.setValue(7, 0, 'Germany'); > > data.setValue(7, 1, 1273.5); > > data.setValue(8, 0, 'United States'); > > data.setValue(8, 1, 1770.9); > > data.setValue(9, 0, 'China'); > > data.setValue(9, 1, 7527.8); > > > var options = {}; > > options['dataMode'] = 'regions'; > > > var container = document.getElementById('map_canvas'); > > var geomap2 = new google.visualization.GeoMap(container); > > geomap2.draw(data, options); > > > }; > > > </script> > > </head> > > > <body> > > <div id="my_title"><h3>Worldwide Production and Consumption of Non- > > Ferrous Metals</h3></div> > > <div id='map_canvas'></div> > > > <div style="position: absolute; left: 760px; top: 5px; height: > > 400px; width: 200px; padding: 1em;" id='form'> > > <form name="varform"position: absolute; left: 760px; top: 5px; > > height: 400px; width: 200px; padding: 1em;"id='form'> > > > <form name="varform" method="get"> > > <p> > > <b>Production</b> > > <select name="varfg" onchange="mapEvent()"> > > <option value="Aluminium">Aluminium</option> > > <option value="Copper">Copper</option> > > <option value="Lead">Lead</option> > > <option value="Nickel">Nickel</option> > > <option value="Tin">Tin</option> > > </select> > > </p> > > > <form name="varform" method="get"> > > <p> > > <b>Consumption</b> > > <select name="varfg" onchange="mapEvent()"> > > <option value="Aluminium">Aluminium</option> > > <option value="Copper">Copper</option> > > <option value="Lead">Lead</option> > > <option value="Nickel">Nickel</option> > > <option value="Tin">Tin</option> > > </select> > > </p> > > > </body> > > > </html> > > > -- > > You received this message because you are subscribed to the Google Groups > > "Google Visualization 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-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 [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-visualization-api?hl=en.
