How to use distinct colors with Google GeoChart

Question

I understand how to use the GeoChart to display a data that is in a continuum (i.e. temperture).

But how can you configure it to display distinct data sets (states that are republican, democratic, independent)? Is this possible?

Thanks!

Answer 1

You can also solve this by massaging the data a bit and using formatted values for your labels. You should be able to paste the following code into here to see an example:

function drawVisualization() {
  var geoData= new google.visualization.DataTable();
  geoData.addRows(2);
  geoData.addColumn('string', 'State');
  geoData.addColumn('number', 'Votes (%)');

  geoData.setValue(0, 0, 'Alabama');
  geoData.setValue(0, 1, 0);
  geoData.setFormattedValue(0, 1, '56%');

  geoData.setValue(1, 0, 'Maine');
  geoData.setValue(1, 1, 1);
  geoData.setFormattedValue(1, 1, '64%');

  var options = {};
  options['region'] = 'US';
  options['resolution'] = 'provinces';
  options['colorAxis'] = { minValue : 0, maxValue : 1, colors : ['#FF0000','#0000FF']};
  options['backgroundColor'] = '#FFFFFF';
  options['datalessRegionColor'] = '#E5E5E5';
  options['width'] = 556;
  options['height'] = 347;
  options['legend'] = 'none';

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(geoData, options);
}

​