score:1

Accepted answer

First of all, you need to convert your data to a readable format for Highcharts.

API: https://api.highcharts.com/highmaps/series.map.data

For example, create separate arrays for each year:

let data2015 = [
    ['py-ag', 10, 20, 30],
    ['py-bq', 40, 50, 60]
  ];  

let data2016 = [
    ['py-ag', 15, 25, 35],
    ['py-bq', 45, 55, 65]
  ];

The additional data needs to be connected to the chart, by the series.keys:

API: https://api.highcharts.com/highcharts/plotOptions.series.keys

plotOptions: {
  series: {
    keys: ['hc-key', 'total', 'hombre', 'mujer']
}

Then, you can easily refer to this data in the tooltip.formatter

API: https://api.highcharts.com/highcharts/tooltip.formatter

tooltip: {
  formatter: function() {
    let point = this.point;
    return '<b>' + point.name + '</b><br>' + 'Total: ' + point.options.total + '<br>' + 'Hombre: ' + point.options.hombre + '<br>' + 'Mujer: ' + point.options.mujer
  }
}

For updating data by drop-down list use series.update method:

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

  document.getElementById('select').onchange = function() {
    let option = this.value;
    if (option === 'data2015') {
      chart.series[0].update({
        data: data2015,
        name: '2015'
      });
    }
    if (option === 'data2016') {
      chart.series[0].update({
        data: data2016,
        name: '2016'
      });
    }
  };

Demo: https://jsfiddle.net/BlackLabel/41phgcen/


Related Articles