We Keep Coding

how to provide United States State code instead of country code in a geo map?

I was trying to identify and coloring US states in the basis of some values. But it takes only country code. I tried the below code-
var geomap_chartdata = google.visualization.arrayToDataTable([
['States', 'Popularity'],
['ID', 200],
['IN', 300],
['KY', 400],
['LA', 500],
['MA', 600],
['MT', 600],
['OH', 600],
['NY', 600],
['WA', 700]
]);
var options = {};
options['displayMode'] = 'regions';
var chart = new google.visualization.GeoChart(document.getElementById('revenue_inbound_map'));
chart.draw(geomap_chartdata, options);
But this is not working. Instead of recognizing the State codes geo map identify those as country code. Please help me to fix this.

In the options you need to mention what is it that you are looking for and also the resolution. So, give the region as US and display mode as regions. Try this:
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([
['States', 'Popularity'],
['ID', 200],
['IN', 300],
['KY', 400],
['LA', 500],
['MA', 600],
['MT', 600],
['OH', 600],
['NY', 600],
['WA', 700]
]);
var opts = {
region: 'US',
displayMode: 'regions',
resolution: 'provinces',
width: 640,
height: 480
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, opts);
}

this.each is not a function error in google geochart

<div id = "geochart" >< /div>
<script type = "text/javascript" >
google.charts.setOnLoadCallback(drawAcChart);
function drawAcChart() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['South America', 600],
['Canada', 500],
['France', 600],
['Russia', 700],
['Australia', 600]
]);
var options = {
displayMode: 'text'
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart'));
chart.draw(data, options);
}
</script>
I have above code to get geograph. but i am getting this.each is not a function error in geochart div . Can any give solution please.

packages are loaded in the load statement...
google.charts.load('current', {
callback: drawCharts,
packages: ['corechart', 'geochart'] // <-- packages for regular charts and geo charts
});
regular charts like line, column, and scatter, all use the 'corechart' package
specialty charts, like the geo chart, typically have their own package that needs loading...
be sure to load the 'geochart' package...
see following working snippet...
google.charts.load('current', {
callback: drawCharts,
// packages for regular charts, and geo charts
packages: ['corechart', 'geochart']
});
function drawCharts() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var chartGeo = new google.visualization.GeoChart(document.getElementById('regions_div'));
chartGeo.draw(data);
var chartCol = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chartCol.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="regions_div"></div>

Remove the range-bar from Google charts

I have created a Google chart and I'm trying to remove the 'Range bar' it seems? (I'm not sure of its official name) but here's a picture. I've tried Googling remove range bar from Stackoverflow but I've had no results.
Any help on how I can remove this is greatly appreciated. What do i target to remove this?

you can remove the legend, by including legend: 'none' in the config options...
see following working snippet...
google.charts.load('upcoming', {
callback: drawRegionsMap,
packages: ['geochart']
});
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: 'none'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Geochart - mark one country with a special color

There is a standard example of Google Geochart, countries have a scale color depends on value. My question is how to mark one country, for example Canada, with an red one, but leave another countries like before. It is ok if Canada will be without value, just how to mark it in another color?
https://jsfiddle.net/8wowo9xc/
google.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 = {};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
The desire result:

If you specify the defaultColor and give Canada no value, this will do exactly what you want.
So something like:
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', null],
['France', 600],
['RU', 700]
]);
var options = {defaultColor: 'red'};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}

try :
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Canada', 500]
]);
for other country or other color simply try this:
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Ireland', 200],
]);
var options = {
//region: 'IT',
//displayMode: 'markers',
colorAxis: {colors: ['red']}
};
Or for your last request try:
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Canada', 100],
['US', 1000],
['Russia',500]
]);
var options = {
//region: 'IT',
//displayMode: 'markers',
colorAxis: {colors: ['red', 'green', 'lightgreen']}
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
Final consideration:
To use the polygons should already have polygons of various states with coordinates. and however it comes to writing a little program in JavaScript. If all you need is a data presentation with a state highlight (red) and the other with two colors (a darker green an a lighter green) you better take advantage of the numerical value as I did in the example. Create the list of states that interest you and state that you weaves mo put in evidence with the lowest value so that it is red, and intermediate value by displaying an intermediate color and so on.
The way forward is very dependent on your experience as a programmer.

Geochart Not Showing Small Provinces

I have problem using geochart for displaying small provinces in my country, the province is Jakarta.
Later I want to create a map like this http://www.olx.co.id/ using geochart,
When I'm using marker to display the area, it show but when I'm not using the province is dissapear
var data = google.visualization.arrayToDataTable([
['Provinces', 'Popularity'],
['Jawa Barat', 200],
['Jawa Tengah', 300],
['Jawa Timur', 400],
['Bali', 500],
['Jakarta', 600], // this now show
['Aceh', 700]
]);
var options = {
region: 'ID',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
like this : http://jsfiddle.net/x42hfd7e/
Thanks in advance

If you type in the ISO 3166-2 code for Jakarta Special Capital Region, 'ID-JK', as the 'Province' then it will work. See below:
var data = google.visualization.arrayToDataTable([
['Provinces', 'Popularity'],
['Jawa Barat', 200],
['Jawa Tengah', 300],
['Jawa Timur', 400],
['Bali', 500],
['ID-JK', 600],
['Aceh', 700]
]);
Please see my revision of the JSfiddle here:
http://jsfiddle.net/x42hfd7e/1/
For a list of ISO 3166-2:ID codes, please see the "Table of Provinces" here:
http://en.wikipedia.org/wiki/Provinces_of_Indonesia).