var geochart options google does not work

Question

var geochart options google does not work

Navigation

#1 by (4 votes)

3

I am working on geochart, although the map is correctly generated the color optionsAxis, title, backgroundColor, datalessRegionColor and defaultColor are not reflected in the map.

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([
    ['Departamento', 'Número de SE', '%'],
    ['Amazonas', 0, 0],
    ['Antioquia', 3775, 22],
    ['Arauca', 15, 0],
    ['Atlántico', 761, 4],
    ['Bogotá', 3792, 22],
    ['Bolívar', 476, 3],
    ['Boyacá', 183, 1],
    ['Caldas', 439, 3],
    ['Caquetá', 48, 0],
    ['Casanare', 39, 0],
    ['Cauca', 206, 1],
    ['Cesar', 218, 1],
    ['Chocó', 7, 0],
    ['Córdoba', 111, 1],
    ['Cundinamarca', 752, 4],
    ['Guainía', 0, 0],
    ['Guaviare', 0, 0],
    ['Huila', 154, 1],
    ['La Guajira', 113, 1],
    ['Magdalena', 175, 1],
    ['Meta', 201, 1],
    ['Norte De Santander', 229, 0],
    ['Nariño', 96, 1],
    ['Putumayo', 5, 0],
    ['Quindío', 147, 1],
    ['Risaralda', 649, 4],
    ['Santander', 740, 4],
    ['Sucre', 24, 0],
    ['Tolima', 247, 1],
    ['Valle Del Cauca', 2586, 15],
    ['Vaupés', 0, 0],
    ['Vichada', 0, 0]
  ]);
  var options = {
    'title': 'Número por departamento',
    backgroundColor: '#81d4fa',
    datalessRegionColor: '#f8bbd0',
    defaultColor: '#f5f5f5',
    colorAxis: {
      colors: ['#58D123', '#FF0000']
    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));

  chart.draw(data, {
    resolution: 'provinces',
    region: 'CO'
  });
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors" style="width: 600px; height: 200px;"></div>

javascript html google-visualization

asked by jgaitan 21.06.2017 в 23:04

source

1 answer

C # - Auxiliary copy of an arraylist Transform dataframe dictionary into a single DataFrame

score 4 · Accepted Answer

Each visualization has its own set of configuration options. In this case, a GeoChart is being used. The configuration options for this type of display are indicated in link

Contrary to the case of a "Pie Chart" a GeoChart does not include title among the configuration options.

Regarding the configuration options, note that when calling the graph

chart.draw(data, {
    resolution: 'provinces',
    region: 'CO'
  });

You are not including the options object that you previously defined, but another object.

Here is a simplified and corrected version:

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([
    ['Departamento', 'Número de SE', '%'],
    ['Amazonas', 0, 0],
    ['Antioquia', 3775, 22],
    ['Arauca', 15, 0],
    ['Atlántico', 761, 4],
    ['Bogotá', 3792, 22],
    ['Bolívar', 476, 3],
  ]);
  var options = {
    backgroundColor: '#81d4fa',
    datalessRegionColor: '#f8bbd0',
    defaultColor: '#f5f5f5',
    colorAxis: {colors: ['#58D123', '#FF0000']},
    resolution: 'provinces',
    region: 'CO'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));

  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors" style="width: 600px; height: 200px;"></div>