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>
Related
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???
I am creating a multilevel donut chart with google charts.
I am successful to creating a single level chart. But now I have to create another chart in that chart.
Please help me. And also is that possible to write text on chart slice in circular form?
here is my code for single donut chat.
HTML
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
JS
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
pieHole: 0.4,
chartArea:{left: '100'},
pieSliceText: 'label',
pieStartAngle: 0,
pieSliceTextStyle:{color: 'white', fontName: 'arial', fontSize: 10}
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
}
and here is code link in JsFiddle
IT should be look like
This was possible with the Google Image Charts API, which has been deprecated in 2012. It seems to still be up and running, it's just not maintained anymore.
With that API, it was (and still is) possible to create concentric pie charts such as the one below
http://chart.apis.google.com/chart?chd=s:Yr3,ff9&cht=pc&chs=300x200&chxr=0,20,45|1,25,50
which yields the following pie chart
Also you can play with the API and easily create your own pie charts here:
http://www.jonwinstanley.com/charts/
Supporting this kind of concentric Pie chart in the new Google Charts API is still an open issue
I know it's has been a long time ago but here's one way you can do this, using google charts:
But, I removed the subtitles because they interfere in the position of objects, i think it's easier and better if we do our subtitles . Then i just made some drawings e maths to achieve this.
You can control the size and pieHole with 3 variables.
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
//control is here
let larguraGraficoFora = 400;
let alturaGraficoFora = 400;
let furoGraficoFora = 0.6;
var data = google.visualization.arrayToDataTable([
['Sabor de Pizza', 'Quantidade'],
['portuguesa', 30],
['frango com catupiry', 30],
['calabresa', 30],
['alguma doce', 30],
]);
var options = {
width: larguraGraficoFora,
height: alturaGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
pieHole: furoGraficoFora,
legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donut_1'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['python', 20],
['c#', 20],
['javascript', 20],
['php', 20],
['sql server', 20],
]);
var options2 = {
legend:'none',
width: larguraGraficoFora*furoGraficoFora,
height: alturaGraficoFora*furoGraficoFora,
chartArea:{left:0,top:0,width:'100%',height:'100%'},
backgroundColor: 'transparent',
legend: 'none'
};
var chart2 = new google.visualization.PieChart(document.getElementById('donut_2'));
chart2.draw(data2, options2);
ajustePosicaoPieCentral(larguraGraficoFora, alturaGraficoFora, furoGraficoFora);
}
function ajustePosicaoPieCentral(largura, altura, furo){
yt = altura*(1+furo)/2.0;
xt = largura*(1-furo)/2.0;
var css = document.getElementById('donut_2');
css.style.transform = "translate("+xt+"px, -"+yt+"px)";
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_1" ></div>
<div id="donut_2"></div>
You can see in this fiddle
In the year 2004 I have values of 1000, and in the other years I have large values, for that reason in the scale the chart doesn't seems able to rendered, what can I do to show those values. I was reading this. Is there a way to do something like that in google chart?
Here is the code
<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, 1000],
['2005', 1170000, 460000],
['2006', 660000, 1120000],
['2007', 1030000, 540000]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
The chart
Google Chart´s axis have an option to set scale to logarithm, which fits better for big differences between lowest and highest values. Note that all values must be positive and if the data value is 1, it won´t show as logharithm scale starts at 1 or higher. To change it, use:
vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, logScale:true}
You can find the documentation in configuration options section:
Google Chart Configuration Options
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.