-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathgeochart-mixed-usage.html
44 lines (39 loc) · 1.32 KB
/
geochart-mixed-usage.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
<title>Google GeoChart Mixed Usage Sample</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
// https://developers.google.com/maps/documentation/javascript/get-api-key
'mapsApiKey': '[MAPS-API-KEY]'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
['Australia'], // AU
['Austria'], // AT
['Azerbaijan'], // AZ
['BR'], //Brazil
['CN'], //China
['Turkey'], // TR
['United States of America'], // US
]);
var options = {
colorAxis: {colors: ['#00853f', 'black', '#e31b23']},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data);
};
</script>
</head>
<body>
<div id="geochart-colors" style="width: 100%; height: 100%;"></div>
</body>
</html>