CODEWITHSUNDEEP
google-visualization
A.W.
A.W.

Reputation: 3021

How to add labels in provinces in Google Geochart

I'm using Google Charts in Angular4 https://github.com/vimalavinisha/angular2-google-chart

example provinces chart:

  public map_ChartData = [
    ['Provinces',   'Popularity'],
         [{ v: 'NL-DR', f: 'Drenthe' },  5],
         [{ v: 'NL-NH', f: 'Noord-Holland' },  1000],
         [{ v: 'NL-UT', f: 'Utrecht' },  800],
         [{ v: 'NL-FL', f: 'Flevoland' },  200],
         [{ v: 'NL-FR', f: 'Friesland' },  350],
         [{ v: 'NL-GE', f: 'Gelderland' },  450],
         [{ v: 'NL-GR', f: 'Groningen' },  788],
         [{ v: 'NL-LI', f: 'Limburg' },  244],
         [{ v: 'NL-NB', f: 'Noord-Brabant' },  750],
         [{ v: 'NL-OV', f: 'Overijssel' },  620],
         [{ v: 'NL-ZE', f: 'Zeeland' },  50],
         [{ v: 'NL-ZH', f: 'Zuid-Holland' },  890]
      ];

  public map_ChartOptions = {
    region: 'NL', resolution: 'provinces',
    colorAxis: {
      minValue: 0,
      maxValue: 1000,      
      colors: ['grey', 'yellow', 'orange', 'blue', 'green']
    }};


<div id="map_chart" 
(itemSelect)="itemSelected($event)" 
(itemDeselect)="itemDeselected($event)" 
[chartData]="map_ChartData"
[chartOptions]="map_ChartOptions" 
chartType="GeoChart" 
GoogleChart></div>

enter image description here

Is it possible to display the name and value in province besides in the tooltip?

UPDATE Using this shows an empty map:

  public map_ChartOptions = {
    region: 'NL', resolution: 'provinces', displayMode: 'text',
    colorAxis: {
      minValue: 0,
      maxValue: 1000,      
      colors: ['grey', 'yellow', 'orange', 'blue', 'green']
    }};

enter image description here

UPDATE 2:

I was missing to get an API key for Google Maps at https://developers.google.com/maps/documentation/javascript/get-api-key#step-1-get-an-api-key-from-the-google-api-console and include 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

enter image description here

Upvotes: 1

Views: 2759

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

using option --> displayMode: 'text' -- will apply labels
the labels are slow to load but do appear...

however, this will also move the colors to the labels,
and remove the background color from the provinces...

see following working snippet... 

google.charts.load('current', {
  callback: drawChart,
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Provinces',   'Popularity'],
    [{ v: 'NL-DR', f: 'Drenthe' },  5],
    [{ v: 'NL-NH', f: 'Noord-Holland' },  1000],
    [{ v: 'NL-UT', f: 'Utrecht' },  800],
    [{ v: 'NL-FL', f: 'Flevoland' },  200],
    [{ v: 'NL-FR', f: 'Friesland' },  350],
    [{ v: 'NL-GE', f: 'Gelderland' },  450],
    [{ v: 'NL-GR', f: 'Groningen' },  788],
    [{ v: 'NL-LI', f: 'Limburg' },  244],
    [{ v: 'NL-NB', f: 'Noord-Brabant' },  750],
    [{ v: 'NL-OV', f: 'Overijssel' },  620],
    [{ v: 'NL-ZE', f: 'Zeeland' },  50],
    [{ v: 'NL-ZH', f: 'Zuid-Holland' },  890]
  ]);

  var options = {
    displayMode: 'text',
    region: 'NL',
    resolution: 'provinces',
    colorAxis: {
      minValue: 0,
      maxValue: 1000,
      colors: ['grey', 'yellow', 'orange', 'blue', 'green']
    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('chart'));
  chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Upvotes: 3

Related Questions