littlerave
Posts: 18
Joined: Sun May 16, 2021 4:17 pm

Drilldown with custom map data in angular

Fri Oct 08, 2021 4:43 pm

Hello,

I'm trying to get the drilldown feature to work with my custom map. From what I gathered so far is that all I have to do is to add a drilldown property to my series.data, i.e. { id: 'a', value: 1, drilldown: 'A' }, and then add the series to drilldown to in my chartOptions.

Code: Select all

this.chartOptions = {
	series: [{
    		data: [
			{id: 'ar', value: 1, drilldown: null},
			{id: 'kr', value: 3, drilldown: 'kortan'}
		],
		joinBy: 'id',
		mapData: [
			{id: 'ar', name: 'Hathr Kønthom Årgere', path: 'M410.3426751082695,-1212.6972229007235C410.3318769…'},
			{id: 'dv', name: 'Dvargurörd', path: 'M220.16753534435384,-1244.8903732194574L222.591591…'},
			{id: 'kr', name: 'Königreich Kortan', path: 'M277.65794398811335,-758.7553218844333C277.7974898…'}
		],
		type: 'map' }],
	drilldown: {
		series: [{
			id: 'kortan',
			data: [
				{id:'tn', value: 2},
				{id:'so', value: 4}
			],
			joinBy: 'id',
			mapData: [
				{id: 'tn', name: 'Taronn', path: 'M233.47345195058014,-1127.4966044701537C229.401562…'},
				{id: 'so', name: 'Sost', path: 'M902.2166161201222,-670.3668269394242C902.20677489…'}
			],
			type: 'map' }] }}
However, this doesn't do anything when I click on the 'kr' country. Is there anything else I'm missing?

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

Re: Drilldown with custom map data in angular

Mon Oct 11, 2021 8:04 pm

Hi,
Thanks for your question.

Here is a similar topic about drilldown in map with the example at Angular.
viewtopic.php?f=14&t=41527
https://stackblitz.com/edit/angular-5vp ... mponent.ts

If you have more questions try to reproduce your example at the online code editor.
Best regards.
Sebastian Hajdus
Highcharts Developer

littlerave
Posts: 18
Joined: Sun May 16, 2021 4:17 pm

Re: Drilldown with custom map data in angular

Wed Oct 13, 2021 5:55 am

Thank you for the link.

I've added an empty drilldown object to my chartOptions, added a drilldown event handler to the chartOptions.chart.events and filled the elements in series.data with a drilldown value. However, the drilldown event isn't triggering when I click on a country. Can't see anything else I'm missing here. Is this related to me using custom map data instead of a ready-made map like the canada one in the example?

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

Re: Drilldown with custom map data in angular

Wed Oct 13, 2021 6:19 pm

Hi,
In the example is the old version Angular and Highcharts, maybe there are problems with compatibility.

Best regards.
Sebastian Hajdus
Highcharts Developer

littlerave
Posts: 18
Joined: Sun May 16, 2021 4:17 pm

Re: Drilldown with custom map data in angular

Thu Oct 14, 2021 12:25 am

So ... there is no way to do this?

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

Re: Drilldown with custom map data in angular

Thu Oct 14, 2021 4:54 pm

Hi,
I threw this implementation at the new version and still working, you need to customize it for your project:
https://stackblitz.com/edit/highcharts- ... mponent.ts

Best regards.
Sebastian Hajdus
Highcharts Developer

littlerave
Posts: 18
Joined: Sun May 16, 2021 4:17 pm

Re: Drilldown with custom map data in angular

Fri Oct 15, 2021 5:07 am

Thanks, I've missed the import and call of the drilldown module. Now the event handler gets called.

Code: Select all

import Drilldown from 'highcharts/modules/drilldown';
Drilldown(Highcharts);

littlerave
Posts: 18
Joined: Sun May 16, 2021 4:17 pm

Re: Drilldown with custom map data in angular

Fri Oct 15, 2021 4:15 pm

Unfortunately this results in a follow-up question. I have my map data stored in a property inside of my map component.

Code: Select all

export class MapComponent implements OnInit {
  public drilldownData: Highcharts.SeriesMapOptions = { id: ..., name: ..., type: ..., data: [...], mapData: [...] };
  public chartOptions: Highcharts.Options = {
    chart: {
      events: {
        drilldown(e) {
          // "this" is now the highcharts internal scope object.
          const chart = this as any;
          ...
          // but here I *must* access the drilldownData property of MapComponent, however, since "this" has been overwritten,
          // I cannot access my MapComonent properties anymore.
          chart.addSeriesAsDrilldown(e.point.name, this.drilldownData);
        }
      }
    }
  }
}
I've tried outsourcing the event handler to a method in the MapComponent and I can bind "this" from the highcharts scope to the method but this also overwrites the method's internal "this" necessary to access the MapComponent properties.

Code: Select all

events: { drilldown: this.handleDrilldown.bind(this) } ...

Code: Select all

export class MapComponent implements OnInit {
  ...
  private handleDrilldown(event: Highcharts.DrilldownEventObject): void {
    // Oddly enough, the now passed "this" is a different one to the one in the first case, but I can still access the chart
    // property required.
    const chart: any = this.charts.first.chart;
    // The access to the drilldownData of course doesn't work either.
  }
}
My thought is now to pass the highcharts scope "this" as parameter to the event handler so I can use it in the handler without overwriting the "this" that is the MapComponent object. But for the life of mine, I cannot figure out how to do so.

Return to “Highcharts Maps”