I know this is a vague question but than again this is a vague problem.
I have a simple Google GeoChart like so:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
<script>
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {'displayMode': 'markers'};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
you can find it here:
https://jsfiddle.net/0rd3hp7a/
now here's the thing. I have 2 domains / url's linked to this .php file.
the map generates fine on one domain and on the other the map pops up but the green markers do not.
Both domains run under php 5.2.17 and the provider tells me that both domains have same settings ... which is hard to believe since they work differently of the SAME file.
Any ideas where I can look for the problem???
Related
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?
There is a bug which is hard for me to solve, but I managed to narrow it down to simple steps that can be reproduced.
1) Go to https://developers.google.com/chart/interactive/docs/gallery/geochart
2) Copy paste the first GeoChart example in a file in the desktop
3) Add the country Sudan and South Sudan and save the file as mygeochart.html
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
['Sudan', 700],
['South Sudan', 700]
]);
var options = {};
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>
What works
The above code will work if you double click the HTML file, and you will see that both Sudan and South Sudan are visible in green.
I can also confirm that this code works on JSFiddle.net.
What does not work when combining with ASP.NET
I checked that the issue described below occurs in ASP.NET Full framework and ASP.NET Core on VS 2015 update 3, whether the chosen template is empty or an MVC web application and for .Net 4.5.1 and 4.6.1. The empty template is the one which allows you to narrow down the issue.
Simply create one empty project and put the above HTML file in the solution folder, run the website and go to the page
http://localhost:xxxxx/mygeochart.html
The page will display correctly except for South Sudan, which remains white as if it had no data.
I am facing this problem on a production website and the countries below have this problem, too.
['South Sudan', 700],
['Kosovo', 700],
['Democratic Republic of the Congo', 700],
['Congo', 700]
These countries appear very well if you double click the HTML file, but will not show up when included in ASP.NET projects. I checked that this bug occurs on Firefox, IE, EDGE and Chrome browsers and, following WhiteHat's suggestion, the bug also occurs regardless of google-visualization versions ('current', 'upcoming' and versions '41' through '45').
We are running the GeoChart on a production website but it is hard for us to solve this issue.
Any idea?
something I noticed.
if you run / refresh the following Chart 1, over and over,
it appears there is a delay when filling in 'South Sudan'
it is consistently the last to fill color
however, if the ISO 3166-1 alpha-2 code is used -- 'SS'
there is no delay when filling the color, as in Chart 2 below.
maybe try using 'SS' instead of 'South Sudan'
test charts...
Chart 1 - 'South Sudan'
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
['Sudan', 700],
['South Sudan', 700]
]);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data);
},
packages: ['geochart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
Chart 2 - 'SS'
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700],
['Sudan', 700],
// use object notation to correct tooltip
[{v: 'SS', f: 'South Sudan'}, 700]
]);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data);
},
packages: ['geochart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>
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
I have been playing around with Line Charts using the Google Charts API and the following example shows a multi-dimensional array being populate into a data table then displayed on the screen.
It works great but I'd like to be able to populate data from a CSV file found in the same folder which may contain n amount of columns.
Can anyone help figure this out?
I think one would access the csv file with JQuery .get and then convert it into an array. I'm just not very JS savvy nowadays..
<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);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
You should try the recommendation from Reading client side text file using Javascript
It's JS way, from that you can turn each line into an array
Other method is by using ajax call to server side and then process the csv and return array
I think that will solve the crossbrowser issue problem.
Hi i want to show "Bangalore"(INDIA) in map using google Geomap.I got one code from developer.google.com site and i have create one for INDIA ,using
option['region']="IN";
but i want "Bangalore" (A major city in India) map instead of india. Is there any way to get that .
Please check the code for INDIA
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Popularity'],
['Karnataka', 200],
['Delhi', 300],
['Bihar', 600],
['Kerala', 700]
]);
var options = {};
options['region'] = 'IN';
options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
and output is
Google does not have APIs for cities of India. I was facing the same issue while creating a map of Mumbai.
I used this website to do so.
http://www.image-maps.com/
So you basically give a static map of Bangalore. This website will create a object for you and you can download that code.
Try it out!
Worked for me while dividing Mumbai into Municipality wards.