I am trying to create a custom clickable map using GeoChart from Google for a website. I want countries to be clickable, where once users select different countries on the map, it would direct them to a separate web page. Also, I want the color to change when it's in a selected state.
Can someone help me with the JavaScript on how to add the select event? I would appreciate it.
Below is the code I have so far.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD3MfRYHAynUsxWCZ8NDsA3cwvWlTkhT1s'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
['Thailand' ],
['India'],
['Malaysia'],
['Sri Lanka'],
['Indonesia'],
['Vietnam'],
['Korea'],
['Taiwan'],
['China'],
]);
var options = {
region: '142', // Asia
colorAxis: {colors: ['#f5f5f5']},
datalessRegionColor: '#f5f5f5',
defaultColor: '#ff8040',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="geochart-colors" style="width: 700px; height: 433px;"> </div>
</body>
</html>
As you can see in my code you need to add a listener which is the google.visualization.events.addListener. Then inside that listener, you can get the name of the selected country. I printed by console.log() function you can do whatever you like with that.
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD3MfRYHAynUsxWCZ8NDsA3cwvWlTkhT1s'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country'],
['Thailand' ],
['India'],
['Malaysia'],
['Sri Lanka'],
['Indonesia'],
['Vietnam'],
['Korea'],
['Taiwan'],
['China'],
]);
var options = {
region: '142', // Asia
colorAxis: {colors: ['#f5f5f5']},
datalessRegionColor: '#f5f5f5',
defaultColor: '#ff8040',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', function() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var country = data.getValue(selectedItem.row, 0);
console.log(country);
}
}); };
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
</head>
<body>
<div id="geochart-colors" style="width: 700px; height: 433px;"> </div>
</body>
</html>
Related
I have been trying to follow along with the Google Charts documentation for GeoCharts. For some reason, whenever I try to run their code for markers on my local host it only returns a blank map of Italy. I have created my own Google Maps JS API key and am using that instead of the one provided but it still returns nothing. I'm very lost as I have not been able to find anything that can guide me to the right direction. Any help would be appreciated.
<html>
<head>
<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' //used my own API key instead of theirs
});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76],
['Naples', 959574, 117.27],
['Turin', 907563, 130.17],
['Palermo', 655875, 158.9],
['Genoa', 607906, 243.60],
['Bologna', 380181, 140.7],
['Florence', 371282, 102.41],
['Fiumicino', 67370, 213.44],
['Anzio', 52192, 43.43],
['Ciampino', 38262, 11]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I'm trying to populate a geochart from Google Charts.
Basically I'm doing a count of people in STATE, ZIPCODE, COUNT. If i do only STATE and COUNT, it works fine. but when I try to add the zipcode, the map isn't being generated properly.
That's my code:
<html>
<head>
<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', 'Count'],
['FL', 16],
['MA', 2149],
['NY', 2784],
['NC', 9782],
['PA', 9923],
['WA', 15],
<!-- i want to be able to have the following on the geochart -->
/*['State', 'Zip Code', 'Count'],
['AZ',85013,1],
['CA',91945,12],
['CA',96003,1],
['CA',18045,25],
['CA',92377,1],
['CA',93703,10],
['CA',95407,1],
['CA',93720,6],
['CA',93619,1],
['CA',92009,8],
['CA',93727,1],
['CO',80003,5],
['CO',80004,1],
['CO',80220,2],
['CO',80504,8],
['CO',80134,21],
['CO',80016,1],
['CO',80228,19],
['CO',80111,3],
['CT',06795,1],
['CT',06762,12],*/
]);
var options = {
region: 'US',
displayMode: 'markers',
resolution: 'provinces',
colorAxis: {colors: ['#fff9ef', '#fffa00']}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I don't understand why when I add the zip code to the data, it just return a blank map. If I change the resolution to 'metros', it seems to give a more granular level in the map as compared to 'provinces'.
Is this something that's possible in google GeoCharts?
**I want to write an event listener in the hmtl script for a function in the external javascript file **
/**
* Created by ramnath on 02-03-2016.
*/
/*chart.js*/
var merry;
merry=this;
var a=10;
function starlander(){
var name=['Year', 'Sales', 'Expenses'];
var data1=['2004', 1000, 400];
var data2=['2005', 1170, 460];
var data3=['2006', 660, 1120];
var data4=['2007', 1030, 540];
table=[name,data1,data2,data3,data4];
console.log("control came to me");
//drawChart(table);
return table;
}
function Alwayschanges(){
this.on('input',function(msg){
msg=msg.payload;
return msg;
})
}
> In this html page i want to monitor the function Alawyschanges and get msg every time there is a change in Alwayschanges funciton
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="chart.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function updateChart(){
//event listener
}
function drawChart() {
var data = google.visualization.arrayToDataTable(starlander());
var options = {
title: "you got me pal",
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
updateChart();
}
</script>
</head>
<body>
<p id="demo"></p>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
I am trying to make a piechart with the google piechart api..I am making this all clientside(html and javascript only)
What I want to do is the following when my webpage loads: load the chart with data, but when I select some other topic through a dropdownlist it should load other data in the chart...
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
var Samplevalue =document.getElementById("SampleVAL").value;
function drawChart() {
if(Samplevalue.value="ergo01")
{
var data = google.visualization.arrayToDataTable([
['Soort', 'Aantal'],
['Escherichia', 12.10],
[' Ruminococcus', 6.44],
['Christensenellaceae', 6.15],
['Oscillospira', 13.20],
['Faecalibacterium', 15.50],
['Bacteroides', 3.07],
['Coprococcus', 1.02],
['Bacteroides', 1.00],
['Akkermansia', 0.81],
['Comamonas', 0.69]
]);
}
else if(Samplevalue.value="ergo02")
{
var data = google.visualization.arrayToDataTable([
['Soort', 'Aantal'],
['Escherichia', 25.10],
[' Ruminococcus', 60.44],
['Christensenellaceae', 66.15],
['Oscillospira', 103.20],
['Faecalibacterium', 15.50],
['Bacteroides', 3.07],
['Coprococcus', 1.02],
['Bacteroides', 1.00],
['Akkermansia', 0.81],
['Comamonas', 0.69]
]);
}
else {
var data = google.visualization.arrayToDataTable([
['Soort', 'Aantal'],
['Escherichia', 25.10],
[' Ruminococcus', 60.44],
['Christensenellaceae', 66.15],
['Oscillospira', 103.20],
['Faecalibacterium', 15.50],
['Bacteroides', 3.07],
['Coprococcus', 1.02],
['Bacteroides', 1.00],
['Akkermansia', 0.81],
['Comamonas', 0.69]
alert("hier"); ]);
}
var options = {
title: 'My Daily Activities',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<script>
function myFunction() {
var e = document.getElementById("SampleVAL").value;
//var strUser = e.options[e.selectedIndex].value;
alert(e);
}
</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<select id="SampleVAL" value="none">
<option value="ergo01">sample1</option>
<option value="ergo02">sample2</option>
<option value="ergo03">sample3</option>
</select>
<button onclick="drawChart()">Try it</button>
</body>
</html>
The issue was that the chart wasn't loading, thanks to #Sourabh Agrawal its working now...I would like this chart to like a little bit more fancy... I am trying to animate it according to google documents .. I should add in the chart options block the following: >>animation:{ >>duration: 1000, easing: 'out', but somehow it isn't working I want my chart to animate as the chart in the following link: navels.yourwildlife.org/explore-your-data Is this possible with google charts?
here is the js Fiddle link to your problem.
https://jsfiddle.net/b7rax1jc/
while comparing values you use "==" and not "="
"=" is for assignment.
2.SampleVAL already contains the value of dropsown so you dont need to use SampleVAL.value when comparing
var Samplevalue =document.getElementById("SampleVAL").value;
if(Samplevalue == "ergo1")
I'm trying to use Google Marker Geocharts for plotting user location event data. Here is the example code of google which i'm using..
<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 data = google.visualization.arrayToDataTable([
['City', 'Population', 'Area'],
['Rome', 2761477, 1285.31],
['Milan', 1324110, 181.76]
]);
var options = {
region: 'IT',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Above is working fine.But, the moment i try to use user location event data(as showing in below)..
var data = google.visualization.arrayToDataTable([
['City', 'Event', 'Year'],
['Rome', 'Birth', '1981'],
['Milan', 'Schooling', '1995-2005']
]);
It's started showing this error -
I searched a lot in google but, did not get any reliable answer. Any idea how to resolve this error ?
Regards