ddrake
Posts: 2
Joined: Thu May 20, 2021 3:19 pm

Multiple data for each country - not loading onto map

Hi all,

I've been wrestling with this for a day and a half now and I can't seem to quite get it. Been trying to incorporate code from several examples but not getting anywhere with it.

I want to show two pieces of data for each country. This code as it stands with joinby:null only shows two countries - and the UK data shows on the map for Japan. I'm only doing a few countries while testing. Will have at least 40-50 more when live.

If I use joinby:id then I get the map but no data loads.

Am I doing something wrong in the joinby? It feels like it's not reading the keys for some reason.

Thanks for any guidance you can provide.

Code: Select all


jQuery(document).ready(function($) {
// 
// Country codes seem to be these ISO a2  not FIPS codes like states
// https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2


var data = [
['ca',21,19],
['cn',115,22],
['us',4015,9],
['uk',15,9],
['de',88,9],
];

// Create the chart
Highcharts.mapChart('world', {
   chart: {
        map: 'custom/world-highres'
    },

    title: {
        text: '2020 Enrollment'
    },

    subtitle: {
        text: 'by Country'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

colorAxis: {
                type: 'linear',
                dataClassColor: 'category',
                min: 0,
                max: 100,
                minColor: '#d9e9f4',
                maxColor: '#6093ca'
                
            },
  tooltip: {
    useHTML: true
  },

 series: [{
       data: data,
       mapData: Highcharts.maps['custom/world'],
       name: 'countries',
       keys: ['id', 'primary', 'secondary'],
       // joinBy: ['id'],
       joinBy: null,
     tooltip: {
      headerFormat: '',
      pointFormatter: function() {
        var hoverVotes = this.hoverVotes; // Used by pie only
        return '<b>Enrollment</b><br/>' +
          Highcharts.map([
            ['Primary', this.primary],
            ['Secondary', this.secondary]

          ], function(line) {
            return '<span style="color:' + line[2] +
              // Colorized bullet
              '">\u25CF</span> ' +
              // Party and votes
              (line[0] === hoverVotes ? '<b>' : '') +
              line[0] + ': ' +
              Highcharts.numberFormat(line[1], 0) +
              (line[0] === hoverVotes ? '</b>' : '') +
              '<br/>';
          }).join('')
      }
       },
        dataLabels: {
            enabled: false,
            format: '{point.name}'
        }
    }]
});


});

User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Multiple data for each country - not loading onto map

Hi,
Welcome to our forum and thanks for contacting us with your question!

Could you describe in more details what do you want to do?

I recreated your example in demo:
https://jsfiddle.net/BlackLabel/bac840sr/

API References:
https://api.highcharts.com/highmaps/plo ... ies.joinBy

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
ddrake
Posts: 2
Joined: Thu May 20, 2021 3:19 pm

Re: Multiple data for each country - not loading onto map

Thanks for your reply and for setting up the test. I am trying to show primary and secondary enrollment numbers (for our college) for each country. I intend to show 40-50 countries in production but only have 5 here for testing.

You can see in my data that I have 5 countries listed but only 2 countries show on the map. Canada, China and Germany do not show at all. And the data for UK is showing in Japan for some reason - even though it is labeled 'uk'.

I'm totally at a loss.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Multiple data for each country - not loading onto map

Hi,

Note how you enter the data, in the example you can see two ways according to different standards.
Options plotOptions.series.joinBy indicates which property to combine with a value, uncomment the code to see for values ['iso-a2', 'code'].
What property to join the mapData to the value data. For example, if joinBy is "code", the mapData items with a specific code is merged into the data with the same code. For maps loaded from GeoJSON, the keys may be held in each point's properties object.

Live demo:
https://jsfiddle.net/BlackLabel/p7u9xL3q/

API References:
https://api.highcharts.com/highmaps/plo ... ies.joinBy
https://www.highcharts.com/docs/maps/ge ... -join-data
https://www.highcharts.com/docs/maps/ma ... properties

Let me know if that was what you were looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer
Muhammad Haris
Posts: 1
Joined: Mon Oct 23, 2023 7:49 am

Re: Multiple data for each country - not loading onto map

As you have make the code like :

Code: Select all

var data = [['ca', 1, 2],
['cn', 10, 15],
['us', 20, 25],
['uk', 30, 35],
['de', 40, 45]];
But for the bar below, we need to give some parameter from the array above, so pointer on the bar can to and fro. I'm taking about the joinBy.
How can i specify that any second (primary) or third (secondary) row should be act as joinBy.
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Multiple data for each country - not loading onto map

As you can read in the API:
What property to join the mapData to the value data. For example, if joinBy is "code", the mapData items with a specific code is merged into the data with the same code. For maps loaded from GeoJSON, the keys may be held in each point's properties object.

The joinBy option can also be an array of two values, where the first points to a key in the mapData, and the second points to another key in the data.

When joinBy is null, the map items are joined by their position in the array, which performs much better in maps with many data points. This is the recommended option if you are printing more than a thousand data points and have a backend that can preprocess the data into a parallel array of the mapData.

So there's no easy way to specify a "primary" or "secondary" row, but there seems to be no logical need for having more than one, "primary" key.

Could you please elaborate on your use case and share with me in which scenarios would it be useful to have more than 1 key in joinBy?

Best regards
Jakub
Highcharts Developer

Return to “Highcharts Maps”