Geochar Bug - Listener in iOS
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ImpactHack</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
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Population'],
['Alaska', 710231],
['Connecticut', 3574097],
['Georgia', 9687653],
['Hawaii', 1360301],
['Minnesota', 5303925],
['Montana', 989415],
['Nebraska', 1826341],
['New Mexico', 2059179],
['Oregon', 3831074],
['Tennessee', 6346105]
]);
var options = {
sizeAxis: { minValue: 0, maxValue: 100 },
region: 'US', // US
resolution: 'provinces',
backgroundColor: '#81d4fa',
displayMode: 'provinces',
enableRegionInteractivity: 'true',
colorAxis: {colors: ['green', 'blue']},
sizeAxis: {minSize: 12, maxSize:20}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(
chart, 'select', function () {
var selection = chart.getSelection();
var row = selection[0].row;
if (row ==0){
modal.style.display = "block";
}
});
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span =...
JavaScript
google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
data.addRows([[{v:'US',f:'United States of America'},0,'21% of <strong> Visits</strong>']]);
data.addRows([[{v:'GB',f:'United Kingdom'},1,'7% <br> of visits']]);
data.addRows([[{v:'DE',f:'Germany'},2,'6% of visits']]);
data.addRows([[{v:'FR',f:'France'},3,'5% of visits']]);
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
google.visualization.events.addListener(geochart, 'select', function() {
alert('A region was clicked');
});
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
geochart.draw(data, options);
}