CODEWITHSUNDEEP
google-sheetshighcharts
Johannes Christ
Johannes Christ

Reputation: 109

How to import data from google spreadsheet in Highmaps map bubble

I built a map bubble with Highmaps that works fine as long as it gets the data from this js file:

<script src="https://medien.lb.madsack.de/rnd/jchrist/coronaweltkarte.js"></script>

see the fiddle

In the next step I want to import data from this google spreadsheet:

https://docs.google.com/spreadsheets/d/1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g/edit#gid=480378207

For that I added this code: 

  data: {
    googleSpreadsheetKey: '1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g'
  },

see fiddle

Unfortunately it does not work. What else do I have to do?

Upvotes: 1

Views: 140

Answers (1)

ppotaczek
ppotaczek

Reputation: 39099

You need to use seriesMapping property to correctly create bubble series from your data. Also, add the map series, for example in complete callback function.

data: {
  googleSpreadsheetKey: '1vkOXfueP5dsAdaRH433kP4SY1KJCxN6W7hPwj79zd_g',
  seriesMapping: [{
    z: 0,
    land: 4,
    lat: 5,
    lon: 6,
    infder: 3,
    totins: 1,
    genins: 2
  }],
  complete: function(options) {
    options.series[0].name = 'Infizierte';
    options.series.push({ // Add map series
      name: 'Länder'
    });
  }
}

Live demo: https://jsfiddle.net/BlackLabel/v3m59kyw/1/

API Reference: https://api.highcharts.com/highmaps/data.seriesMapping

Upvotes: 1

Related Questions