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
Site Moderator
Posts: 1388
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
HCAR
Posts: 5
Joined: Wed Jul 10, 2024 2:25 am

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

@sebastian.h in this example https://www.highcharts.com/demo/maps/basic-map we are using join by ISO-A3 where if i change this to null i get incorrect data,

my actual requirement is we have data as some are united States and some are US and some are USA is there any way to combine these?
jakub.s
Site Moderator
Posts: 1388
Joined: Fri Dec 16, 2022 11:45 am

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

Hi @HCAR,

Welcome to our forum & thanks for the question!

Unfortunately, I'm not sure if I fully understand your question. Could you please elaborate on your desired result?

Best regards!
Jakub
Highcharts Developer
HCAR
Posts: 5
Joined: Wed Jul 10, 2024 2:25 am

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

@jakub.s,

i have below data where all belongs to same country, if we use ISO-A2 its shows 43 in region chart and if we use ISO-A3 we see 90 however we need to show the sum of all how to do in this case using joinby?

United States -1
United States of America-23
US-43
USA-90
jakub.s
Site Moderator
Posts: 1388
Joined: Fri Dec 16, 2022 11:45 am

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

Hi,

I don't think that's possible to achieve by setting a single configuration option. Highcharts does not have this kind of logic implemented internally - it assumes that the data passed to the chart is preprocessed and correct.

You can, however, easily preprocess this type of data yourself and pass it to Highcharts in the format it expects, for example only [US, 1]. The format of those, however, needs to be consistent across all data points.

Best regards!
Jakub
Highcharts Developer
HCAR
Posts: 5
Joined: Wed Jul 10, 2024 2:25 am

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

jakub.s wrote: Thu Jul 11, 2024 6:58 am Hi,

I don't think that's possible to achieve by setting a single configuration option. Highcharts does not have this kind of logic implemented internally - it assumes that the data passed to the chart is preprocessed and correct.

You can, however, easily preprocess this type of data yourself and pass it to Highcharts in the format it expects, for example only [US, 1]. The format of those, however, needs to be consistent across all data points.

Best regards!
Thank you

Return to “Highcharts Maps”