CODEWITHSUNDEEP
javascriptgoogle-mapscharts
Smit
Smit

Reputation: 609

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: The desire result

Upvotes: 1

Views: 962

Answers (2)

nathanvda
nathanvda

Reputation: 50057

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);
  }

Upvotes: 1

ScaisEdge
ScaisEdge

Reputation: 133400

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.

Upvotes: 0

Related Questions