OK. since your datatable is not full, I suggest you the following: 1. create a datatable holding all your data (country, production, consumption, metal name) 2. build a function that will extract a dataview depending on the requested metal and consumption/production 3. use this dataview and draw it on the maps.
here is something I think you wanted to do: <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'> google.load('visualization', '1', {'packages': ['geomap']}); google.setOnLoadCallback(drawMaps); var data; var options = { dataMode: 'regions', width: 750, height: 420, colors: [0xDB4D4D, 0xCC0000, 0x7A0000, 0x3D0000] } function drawMaps() { // create datatable 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]); // lead data.addRow(['United States', 'Lead', 1212.0, 1770.9]); data.addRow(['Japan', 'Lead', 1566.0, 1045.0]); data.addRow(['Chile', 'Lead', 3916.1, 0]); data.addRow(['China', 'Lead', 4525.0, 7527.8]); data.addRow(['Brazil', 'Lead', 0, 443.7]); data.addRow(['Taiwan', 'Lead', 0, 539.8]); data.addRow(['Italy', 'Lead', 0, 456.0]); 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"><h3>Worldwide Production and Consumption of Non-Ferrous Metals (<span id="metalNameString" ></span>)</h3></div> <div id='map_canvas1'></div> <div id='map_canvas2'></div> <div style="position: absolute; left: 760px; top: 5px; 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> </body> </html> On Sat, Nov 19, 2011 at 11:24 PM, JennieB <jennie.ba...@gmail.com> wrote: > 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 <roni.bi...@gmail.com> 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 <jennie.ba...@gmail.com> 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 > > > 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. > > -- 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.
