Google geochart not taking text data - javascript

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

Related

Google Charts GeoChart Markers Not Working

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>

How to add links to Google GeoChart maps?

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>

How to use zipcodes in Google GeoCharts

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?

Google Material chart Column Chart (Bar chart) custom column color not working

I want to draw a simple column chart in HTML-JavaScript using google chart.I have used Google materiel chart CDN to draw a column chart having 4 rows with 4 different colors.
I have tried plenty of options but nothing is working properly. when I have used the colors: ['#b0120a', '#004411', '#ffab91', '#004411'] only the first color is being displayed in all the 4 columns. I have also tried {role:'style'} but still not working.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//google.charts.load('current', {'packages':['bar']});
google.charts.load('visualization', '1', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
/*var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);*/
var data = google.visualization.arrayToDataTable([
['Class', 'Total'],
['A', 10],
['B', 30],
['C', 20],
['D', 30]
]);
var options = {
isStacked: true,
title: 'Class wise total students',
colors: ['#b0120a', '#004411', '#ffab91', '#004411'],
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
The chart is like:
But I want 4 different colors for 4 columns.
Thanks in advance.
Yaa, at last I made this one correct and exactly I wanted to be. Please see the code below, if you required sometime.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('visualization', '1.1', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Class', 'Total',{role: 'style'}],
['A', 10,'color: #b0120a'],
['B', 30,'color: #004411'],
['C', 20,'color: #ffab91'],
['D', 30,'color: #004411']
]);
var options = {
isStacked: false,
title: 'Class wise total students',
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 100%; height: 100%;"></div>
</body>
</html>
I need to changed the definition of chart here. From var chart = new google.charts.Bar(document.getElementById('columnchart_material')); to the modified one as var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_material'));. It's working now.
The chart is like ....

load data in google piechart

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")

Categories