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

Drilldown with custom map data in angular

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: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Drilldown with custom map data in angular

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: 37
Joined: Sun May 16, 2021 4:17 pm

Re: Drilldown with custom map data in angular

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: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Drilldown with custom map data in angular

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: 37
Joined: Sun May 16, 2021 4:17 pm

Re: Drilldown with custom map data in angular

So ... there is no way to do this?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Drilldown with custom map data in angular

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: 37
Joined: Sun May 16, 2021 4:17 pm

Re: Drilldown with custom map data in angular

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: 37
Joined: Sun May 16, 2021 4:17 pm

Re: Drilldown with custom map data in angular

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.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Drilldown with custom map data in angular

Hi,
Thanks for the explanation and details.

When you try to upload map data directly, not through a component it works?

I would start with the simplest form that works and then expand and refine it.
Best regards.
Sebastian Hajdus
Highcharts Developer
littlerave
Posts: 37
Joined: Sun May 16, 2021 4:17 pm

Re: Drilldown with custom map data in angular

Hi,

Well, I figured this was more a Typescript/Javascript rather than a Highcharts issue. For now I've solved it by adding an angular @ViewChildren for chart components to my component, with which I can access the chart.

Code: Select all

  @ViewChildren(HighchartsChartComponent)
  private charts!: QueryList<any>;

  private handleDrilldown(event: Highcharts.DrilldownEventObject): void {
    // "this" is the MapComponent now.
    let chart: any = this.charts.first.chart;
    ...
  }

I also assume I can access it directly via @ViewChild, since I only have one chart, but I haven't tested it yet. I've initially intended to draw multiple charts for each drilldown level before I learned of the built-in drilldown functionality of Highcharts and haven't come to change it.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Drilldown with custom map data in angular

Hi,
Great to hear that you find solution :)

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”