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 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 ;
}
body {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}]));
drawMaps(filteredData);
drawMaps2(filteredData);
}
function drawMaps(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 drawMaps2(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"><br>This web page has been designed to help people
understand the fluctuation of the production and consumption of non-
ferrous metals worldwide.</br>
<br>Instructions:</br>
<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>
<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 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>
</body>
</html>
On Nov 20, 10:58 am, Roni Biran <[email protected]> wrote:
> 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 <[email protected]> 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 <[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
>
> ...
>
> 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 [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.
