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.
