Skip to content

Instantly share code, notes, and snippets.

@sangheestyle

sangheestyle/Scene2_Geo_Chart

Last active December 30, 2015 20:39
Show Gist options
  • Save sangheestyle/7882206 to your computer and use it in GitHub Desktop.
Save sangheestyle/7882206 to your computer and use it in GitHub Desktop.
Download ZIP
Scene2: Geo Chart
Raw
Scene2_Geo_Chart
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Visualization API Sample</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['geochart']});
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var moto_x_data = google.visualization.arrayToDataTable([
['City', 'Moto X', ],
['Abu Dhabi', 345, ],
['Adelaide', 30, ],
['Alaska', 1089, ],
['Almaty', 56, ],
['Amsterdam', 1950, ],
['Arizona', 1685, ],
['Astana', 7, ],
['Athens', 2349, ],
['Atlantic Time (Canada)', 2105, ],
['Auckland', 42, ],
['Azores', 14, ],
['Baghdad', 720, ],
['Baku', 29, ],
['Bangkok', 2915, ],
['Beijing', 4854, ],
['Belgrade', 22, ],
['Berlin', 578, ],
['Bern', 54, ],
['Bogota', 649, ],
['Brasilia', 11800, ],
['Bratislava', 25, ],
['Brisbane', 113, ],
['Brussels', 116, ],
['Bucharest', 198, ],
['Budapest', 26, ],
['Buenos Aires', 3449, ],
['Cairo', 176, ],
['Canberra', 4, ],
['Cape Verde Is.', 5, ],
['Caracas', 1968, ],
['Casablanca', 294, ],
['Central America', 220, ],
['Central Time (US & Canada)', 7435, ],
['Chennai', 936, ],
['Chihuahua', 16, ],
['Chongqing', 16, ],
['Copenhagen', 41, ],
['Darwin', 3, ],
['Dhaka', 28, ],
['Dublin', 160, ],
['Eastern Time (US & Canada)', 12001, ],
['Edinburgh', 57, ],
['Ekaterinburg', 49, ],
['Fiji', 3, ],
['Georgetown', 77, ],
['Greenland', 1280, ],
['Guadalajara', 168, ],
['Guam', 0, ],
['Hanoi', 41, ],
['Harare', 45, ],
['Hawaii', 1563, ],
['Helsinki', 70, ],
['Hobart', 1, ],
['Hong Kong', 350, ],
['Indiana (East)', 147, ],
['International Date Line West', 128, ],
['Irkutsk', 409, ],
['Islamabad', 285, ],
['Istanbul', 127, ],
['Jakarta', 2710, ],
['Jerusalem', 106, ],
['Kabul', 22, ],
['Kamchatka', 0, ],
['Karachi', 119, ],
['Kathmandu', 96, ],
['Kolkata', 157, ],
['Krasnoyarsk', 10, ],
['Kuala Lumpur', 4790, ],
['Kuwait', 81, ],
['Kyiv', 287, ],
['La Paz', 233, ],
['Lima', 241, ],
['Lisbon', 177, ],
['Ljubljana', 9, ],
['London', 2301, ],
['Madrid', 1812, ],
['Magadan', 5, ],
['Marshall Is.', 8, ],
['Mazatlan', 25, ],
['Melbourne', 194, ],
['Mexico City', 1571, ],
['Mid-Atlantic', 482, ],
['Midway Island', 3, ],
['Minsk', 56, ],
['Monrovia', 5, ],
['Monterrey', 155, ],
['Moscow', 558, ],
['Mountain Time (US & Canada)', 1484, ],
['Mumbai', 589, ],
['Muscat', 74, ],
['Nairobi', 140, ],
['New Caledonia', 44, ],
['New Delhi', 750, ],
['Newfoundland', 6, ],
['Novosibirsk', 31, ],
['Nuku alofa', 13, ],
['Osaka', 105, ],
['Pacific Time (US & Canada)', 6666, ],
['Paris', 819, ],
['Perth', 48, ],
['Port Moresby', 11, ],
['Prague', 55, ],
['Pretoria', 89, ],
['Quito', 2133, ],
['Rangoon', 4, ],
['Riga', 9, ],
['Riyadh', 290, ],
['Rome', 728, ],
['Samoa', 3, ],
['Santiago', 3134, ],
['Sapporo', 10, ],
['Sarajevo', 0, ],
['Saskatchewan', 9, ],
['Seoul', 89, ],
['Singapore', 630, ],
['Skopje', 8, ],
['Sofia', 114, ],
['Solomon Is.', 2, ],
['Sri Jayawardenepura', 58, ],
['St. Petersburg', 49, ],
['Stockholm', 90, ],
['Sydney', 121, ],
['Taipei', 115, ],
['Tallinn', 12, ],
['Tashkent', 8, ],
['Tbilisi', 5, ],
['Tehran', 101, ],
['Tijuana', 22, ],
['Tokyo', 941, ],
['Ulaan Bataar', 10, ],
['Urumqi', 0, ],
['Vienna', 26, ],
['Vilnius', 13, ],
['Vladivostok', 6, ],
['Volgograd', 5, ],
['Warsaw', 102, ],
['Wellington', 76, ],
['West Central Africa', 182, ],
['Yakutsk', 4, ],
['Yerevan', 5, ],
['Zagreb', 33, ],
]);
var lg_g2_data = google.visualization.arrayToDataTable([
['City', 'LG G2', ],
['Abu Dhabi', 925, ],
['Adelaide', 5, ],
['Alaska', 775, ],
['Almaty', 158, ],
['Amsterdam', 2566, ],
['Arizona', 1060, ],
['Astana', 16, ],
['Athens', 2800, ],
['Atlantic Time (Canada)', 1730, ],
['Auckland', 38, ],
['Azores', 13, ],
['Baghdad', 1946, ],
['Baku', 28, ],
['Bangkok', 5091, ],
['Beijing', 1653, ],
['Belgrade', 113, ],
['Berlin', 975, ],
['Bern', 66, ],
['Bogota', 539, ],
['Brasilia', 1900, ],
['Bratislava', 53, ],
['Brisbane', 49, ],
['Brussels', 210, ],
['Bucharest', 199, ],
['Budapest', 49, ],
['Buenos Aires', 545, ],
['Cairo', 263, ],
['Canberra', 11, ],
['Cape Verde Is.', 3, ],
['Caracas', 1940, ],
['Casablanca', 363, ],
['Central America', 240, ],
['Central Time (US & Canada)', 3695, ],
['Chennai', 1573, ],
['Chihuahua', 10, ],
['Chongqing', 6, ],
['Copenhagen', 107, ],
['Darwin', 1, ],
['Dhaka', 17, ],
['Dublin', 74, ],
['Eastern Time (US & Canada)', 6106, ],
['Edinburgh', 97, ],
['Ekaterinburg', 112, ],
['Fiji', 0, ],
['Georgetown', 45, ],
['Greenland', 1828, ],
['Guadalajara', 65, ],
['Guam', 2, ],
['Hanoi', 92, ],
['Harare', 65, ],
['Hawaii', 1617, ],
['Helsinki', 114, ],
['Hobart', 1, ],
['Hong Kong', 604, ],
['Indiana (East)', 90, ],
['International Date Line West', 93, ],
['Irkutsk', 880, ],
['Islamabad', 234, ],
['Istanbul', 1288, ],
['Jakarta', 5361, ],
['Jerusalem', 254, ],
['Kabul', 40, ],
['Kamchatka', 6, ],
['Karachi', 45, ],
['Kathmandu', 33, ],
['Kolkata', 223, ],
['Krasnoyarsk', 35, ],
['Kuala Lumpur', 712, ],
['Kuwait', 543, ],
['Kyiv', 558, ],
['La Paz', 202, ],
['Lima', 170, ],
['Lisbon', 107, ],
['Ljubljana', 65, ],
['London', 2557, ],
['Madrid', 3112, ],
['Magadan', 13, ],
['Marshall Is.', 4, ],
['Mazatlan', 14, ],
['Melbourne', 72, ],
['Mexico City', 860, ],
['Mid-Atlantic', 121, ],
['Midway Island', 2, ],
['Minsk', 104, ],
['Monrovia', 3, ],
['Monterrey', 70, ],
['Moscow', 1403, ],
['Mountain Time (US & Canada)', 1033, ],
['Mumbai', 1134, ],
['Muscat', 83, ],
['Nairobi', 562, ],
['New Caledonia', 28, ],
['New Delhi', 1201, ],
['Newfoundland', 7, ],
['Novosibirsk', 88, ],
['Nuku alofa', 16, ],
['Osaka', 151, ],
['Pacific Time (US & Canada)', 5145, ],
['Paris', 1689, ],
['Perth', 48, ],
['Port Moresby', 2, ],
['Prague', 154, ],
['Pretoria', 361, ],
['Quito', 2294, ],
['Rangoon', 9, ],
['Riga', 77, ],
['Riyadh', 1024, ],
['Rome', 1438, ],
['Samoa', 1, ],
['Santiago', 3358, ],
['Sapporo', 67, ],
['Sarajevo', 18, ],
['Saskatchewan', 10, ],
['Seoul', 1239, ],
['Singapore', 669, ],
['Skopje', 27, ],
['Sofia', 85, ],
['Solomon Is.', 0, ],
['Sri Jayawardenepura', 33, ],
['St. Petersburg', 103, ],
['Stockholm', 212, ],
['Sydney', 111, ],
['Taipei', 316, ],
['Tallinn', 11, ],
['Tashkent', 14, ],
['Tbilisi', 7, ],
['Tehran', 117, ],
['Tijuana', 12, ],
['Tokyo', 1345, ],
['Ulaan Bataar', 3, ],
['Urumqi', 1, ],
['Vienna', 59, ],
['Vilnius', 46, ],
['Vladivostok', 29, ],
['Volgograd', 15, ],
['Warsaw', 191, ],
['Wellington', 82, ],
['West Central Africa', 173, ],
['Yakutsk', 12, ],
['Yerevan', 1, ],
['Zagreb', 69, ],
]);
var nexus_5_data = google.visualization.arrayToDataTable([
['City', 'Nexus 5', ],
['Abu Dhabi', 2800, ],
['Adelaide', 195, ],
['Alaska', 2583, ],
['Almaty', 347, ],
['Amsterdam', 15440, ],
['Arizona', 4676, ],
['Astana', 78, ],
['Athens', 14147, ],
['Atlantic Time (Canada)', 6629, ],
['Auckland', 323, ],
['Azores', 53, ],
['Baghdad', 4685, ],
['Baku', 148, ],
['Bangkok', 20674, ],
['Beijing', 5922, ],
['Belgrade', 456, ],
['Berlin', 7367, ],
['Bern', 883, ],
['Bogota', 2136, ],
['Brasilia', 7352, ],
['Bratislava', 238, ],
['Brisbane', 597, ],
['Brussels', 1778, ],
['Bucharest', 1383, ],
['Budapest', 361, ],
['Buenos Aires', 2565, ],
['Cairo', 1307, ],
['Canberra', 63, ],
['Cape Verde Is.', 20, ],
['Caracas', 10966, ],
['Casablanca', 2741, ],
['Central America', 1474, ],
['Central Time (US & Canada)', 18860, ],
['Chennai', 7385, ],
['Chihuahua', 51, ],
['Chongqing', 57, ],
['Copenhagen', 442, ],
['Darwin', 8, ],
['Dhaka', 199, ],
['Dublin', 1031, ],
['Eastern Time (US & Canada)', 34963, ],
['Edinburgh', 1041, ],
['Ekaterinburg', 361, ],
['Fiji', 17, ],
['Georgetown', 151, ],
['Greenland', 5427, ],
['Guadalajara', 326, ],
['Guam', 10, ],
['Hanoi', 252, ],
['Harare', 175, ],
['Hawaii', 6529, ],
['Helsinki', 563, ],
['Hobart', 59, ],
['Hong Kong', 2516, ],
['Indiana (East)', 427, ],
['International Date Line West', 430, ],
['Irkutsk', 4633, ],
['Islamabad', 1297, ],
['Istanbul', 1402, ],
['Jakarta', 14973, ],
['Jerusalem', 668, ],
['Kabul', 101, ],
['Kamchatka', 1, ],
['Karachi', 597, ],
['Kathmandu', 378, ],
['Kolkata', 979, ],
['Krasnoyarsk', 83, ],
['Kuala Lumpur', 6404, ],
['Kuwait', 885, ],
['Kyiv', 1669, ],
['La Paz', 1318, ],
['Lima', 770, ],
['Lisbon', 1051, ],
['Ljubljana', 149, ],
['London', 23625, ],
['Madrid', 20768, ],
['Magadan', 14, ],
['Marshall Is.', 23, ],
['Mazatlan', 102, ],
['Melbourne', 1086, ],
['Mexico City', 3726, ],
['Mid-Atlantic', 333, ],
['Midway Island', 23, ],
['Minsk', 450, ],
['Monrovia', 38, ],
['Monterrey', 380, ],
['Moscow', 3405, ],
['Mountain Time (US & Canada)', 5271, ],
['Mumbai', 6390, ],
['Muscat', 430, ],
['Nairobi', 592, ],
['New Caledonia', 178, ],
['New Delhi', 6346, ],
['Newfoundland', 164, ],
['Novosibirsk', 209, ],
['Nuku alofa', 41, ],
['Osaka', 2836, ],
['Pacific Time (US & Canada)', 26729, ],
['Paris', 11662, ],
['Perth', 334, ],
['Port Moresby', 9, ],
['Prague', 583, ],
['Pretoria', 496, ],
['Quito', 7476, ],
['Rangoon', 34, ],
['Riga', 298, ],
['Riyadh', 2584, ],
['Rome', 9994, ],
['Samoa', 2, ],
['Santiago', 3319, ],
['Sapporo', 597, ],
['Sarajevo', 60, ],
['Saskatchewan', 69, ],
['Seoul', 767, ],
['Singapore', 3233, ],
['Skopje', 181, ],
['Sofia', 455, ],
['Solomon Is.', 5, ],
['Sri Jayawardenepura', 649, ],
['St. Petersburg', 572, ],
['Stockholm', 955, ],
['Sydney', 1211, ],
['Taipei', 839, ],
['Tallinn', 89, ],
['Tashkent', 64, ],
['Tbilisi', 24, ],
['Tehran', 391, ],
['Tijuana', 140, ],
['Tokyo', 22019, ],
['Ulaan Bataar', 58, ],
['Urumqi', 13, ],
['Vienna', 560, ],
['Vilnius', 130, ],
['Vladivostok', 83, ],
['Volgograd', 28, ],
['Warsaw', 661, ],
['Wellington', 430, ],
['West Central Africa', 787, ],
['Yakutsk', 26, ],
['Yerevan', 57, ],
['Zagreb', 306, ],
]);
var sum_data = google.visualization.arrayToDataTable([
['City', 'Sum', ],
['Abu Dhabi', 4070, ],
['Adelaide', 230, ],
['Alaska', 4447, ],
['Almaty', 561, ],
['Amsterdam', 19956, ],
['Arizona', 7421, ],
['Astana', 101, ],
['Athens', 19296, ],
['Atlantic Time (Canada)', 10464, ],
['Auckland', 403, ],
['Azores', 80, ],
['Baghdad', 7351, ],
['Baku', 205, ],
['Bangkok', 28680, ],
['Beijing', 12429, ],
['Belgrade', 591, ],
['Berlin', 8920, ],
['Bern', 1003, ],
['Bogota', 3324, ],
['Brasilia', 21052, ],
['Bratislava', 316, ],
['Brisbane', 759, ],
['Brussels', 2104, ],
['Bucharest', 1780, ],
['Budapest', 436, ],
['Buenos Aires', 6559, ],
['Cairo', 1746, ],
['Canberra', 78, ],
['Cape Verde Is.', 28, ],
['Caracas', 14874, ],
['Casablanca', 3398, ],
['Central America', 1934, ],
['Central Time (US & Canada)', 29990, ],
['Chennai', 9894, ],
['Chihuahua', 77, ],
['Chongqing', 79, ],
['Copenhagen', 590, ],
['Darwin', 12, ],
['Dhaka', 244, ],
['Dublin', 1265, ],
['Eastern Time (US & Canada)', 53070, ],
['Edinburgh', 1195, ],
['Ekaterinburg', 522, ],
['Fiji', 20, ],
['Georgetown', 273, ],
['Greenland', 8535, ],
['Guadalajara', 559, ],
['Guam', 12, ],
['Hanoi', 385, ],
['Harare', 285, ],
['Hawaii', 9709, ],
['Helsinki', 747, ],
['Hobart', 61, ],
['Hong Kong', 3470, ],
['Indiana (East)', 664, ],
['International Date Line West', 651, ],
['Irkutsk', 5922, ],
['Islamabad', 1816, ],
['Istanbul', 2817, ],
['Jakarta', 23044, ],
['Jerusalem', 1028, ],
['Kabul', 163, ],
['Kamchatka', 7, ],
['Karachi', 761, ],
['Kathmandu', 507, ],
['Kolkata', 1359, ],
['Krasnoyarsk', 128, ],
['Kuala Lumpur', 11906, ],
['Kuwait', 1509, ],
['Kyiv', 2514, ],
['La Paz', 1753, ],
['Lima', 1181, ],
['Lisbon', 1335, ],
['Ljubljana', 223, ],
['London', 28483, ],
['Madrid', 25692, ],
['Magadan', 32, ],
['Marshall Is.', 35, ],
['Mazatlan', 141, ],
['Melbourne', 1352, ],
['Mexico City', 6157, ],
['Mid-Atlantic', 936, ],
['Midway Island', 28, ],
['Minsk', 610, ],
['Monrovia', 46, ],
['Monterrey', 605, ],
['Moscow', 5366, ],
['Mountain Time (US & Canada)', 7788, ],
['Mumbai', 8113, ],
['Muscat', 587, ],
['Nairobi', 1294, ],
['New Caledonia', 250, ],
['New Delhi', 8297, ],
['Newfoundland', 177, ],
['Novosibirsk', 328, ],
['Nuku alofa', 70, ],
['Osaka', 3092, ],
['Pacific Time (US & Canada)', 38540, ],
['Paris', 14170, ],
['Perth', 430, ],
['Port Moresby', 22, ],
['Prague', 792, ],
['Pretoria', 946, ],
['Quito', 11903, ],
['Rangoon', 47, ],
['Riga', 384, ],
['Riyadh', 3898, ],
['Rome', 12160, ],
['Samoa', 6, ],
['Santiago', 9811, ],
['Sapporo', 674, ],
['Sarajevo', 78, ],
['Saskatchewan', 88, ],
['Seoul', 2095, ],
['Singapore', 4532, ],
['Skopje', 216, ],
['Sofia', 654, ],
['Solomon Is.', 7, ],
['Sri Jayawardenepura', 740, ],
['St. Petersburg', 724, ],
['Stockholm', 1257, ],
['Sydney', 1443, ],
['Taipei', 1270, ],
['Tallinn', 112, ],
['Tashkent', 86, ],
['Tbilisi', 36, ],
['Tehran', 609, ],
['Tijuana', 174, ],
['Tokyo', 24305, ],
['Ulaan Bataar', 71, ],
['Urumqi', 14, ],
['Vienna', 645, ],
['Vilnius', 189, ],
['Vladivostok', 118, ],
['Volgograd', 48, ],
['Warsaw', 954, ],
['Wellington', 588, ],
['West Central Africa', 1142, ],
['Yakutsk', 42, ],
['Yerevan', 63, ],
['Zagreb', 408, ],
]);
var options = {
title: "Geo Chart by Cities",
displayMode: 'markers',
colorAxis: {colors: ['yellow', 'red']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div_moto_x'));
chart.draw(moto_x_data, options);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div_lg_g2'));
chart.draw(lg_g2_data, options);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div_nexus_5'));
chart.draw(nexus_5_data, options);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div_sum'));
chart.draw(sum_data, options);
};
</script>
</head>
<body>
<h1>Geo Chart</h1>
<h2>Moto X</h2>
<div id="chart_div_moto_x" style="width: 900px; height: 500px;"></div>
<h2>LG G2</h2>
<div id="chart_div_lg_g2" style="width: 900px; height: 500px;"></div>
<h2>Nexus 5</h2>
<div id="chart_div_nexus_5" style="width: 900px; height: 500px;"></div>
<h2>Sum</h2>
<div id="chart_div_sum" style="width: 900px; height: 500px;"></div>
</body>
</html>
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization"></div>
</body>
</html>
​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment