How to assign colour to each countries based on a given set of values - google-visualization

Question

i have to create a GeoChart of US region. currently the color assign to each countries depends on colorAxis.color in a gradient . is there any way to specify color to each country based on given range of values. For example:
value between 0-20 to have Red color
value between 21-40 to have yellow color
and son on? any help in this issue is appreciated. thank you.

Answer 1

it seems the gradient could be overridden if a color name is supplied for every value, using...
colorAxis: {
colors: colorNames, // array of color names -- one for each value
values: colorValues // array of values extracted from the data and sorted ascending
},
here, I adjust the range to match up with the data from a GeoChart example...
red <= -10 > yellow <= 10 > green
google.charts.load('44', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var dataRows = [
['Country', 'Latitude'],
['Algeria', 36], ['Angola', -8], ['Benin', 6], ['Botswana', -24],
['Burkina Faso', 12], ['Burundi', -3], ['Cameroon', 3],
['Canary Islands', 28], ['Cape Verde', 15],
['Central African Republic', 4], ['Ceuta', 35], ['Chad', 12],
['Comoros', -12], ['Cote d\'Ivoire', 6],
['Democratic Republic of the Congo', -3], ['Djibouti', 12],
['Egypt', 26], ['Equatorial Guinea', 3], ['Eritrea', 15],
['Ethiopia', 9], ['Gabon', 0], ['Gambia', 13], ['Ghana', 5],
['Guinea', 10], ['Guinea-Bissau', 12], ['Kenya', -1],
['Lesotho', -29], ['Liberia', 6], ['Libya', 32], ['Madagascar', 13],
['Madeira', 33], ['Malawi', -14], ['Mali', 12], ['Mauritania', 18],
['Mauritius', -20], ['Mayotte', -13], ['Melilla', 35],
['Morocco', 32], ['Mozambique', -25], ['Namibia', -22],
['Niger', 14], ['Nigeria', 8], ['Republic of the Congo', -1],
['Réunion', -21], ['Rwanda', -2], ['Saint Helena', -16],
['São Tomé and Principe', 0], ['Senegal', 15],
['Seychelles', -5], ['Sierra Leone', 8], ['Somalia', 2],
['Sudan', 15], ['South Africa', -30], ['South Sudan', 5],
['Swaziland', -26], ['Tanzania', -6], ['Togo', 6], ['Tunisia', 34],
['Uganda', 1], ['Western Sahara', 25], ['Zambia', -15],
['Zimbabwe', -18]
];
// extract column index 1 for color values
var colorValues = dataRows.map(function(val){
return val.slice(-1);
});
// remove column label
colorValues.splice(0, 1);
// sort ascending
colorValues.sort(function(a, b){return a-b});
// build color names red <= -10 > yellow <= 10 > green
var colorNames = [];
colorValues.forEach(function(value) {
if (value <= -10) {
colorNames.push('red');
} else if ((value > -10) && (value <= 10)) {
colorNames.push('yellow');
} else {
colorNames.push('green');
}
});
var data = google.visualization.arrayToDataTable(dataRows);
var options = {
region: '002',
colorAxis: {
colors: colorNames,
values: colorValues
},
backgroundColor: '#81d4fa',
datalessRegionColor: '#f8bbd0',
defaultColor: '#f5f5f5',
};
var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="geochart-colors" style="width: 700px; height: 433px;"></div>