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

How to update mapData within series for custom map

Hello,

I'm using highmaps with custom map data in an angular app. I fetch the map data (i.e. everything for the chartOptions.series) via an async http request from a server, thus when the angular component is drawn, the data does not exist yet but needs to be updated once the data arrives.

Code: Select all

import { Component, OnInit } from '@angular/core';
import { DbMapService } from 'src/app/services/database/db-map.service';

import { Map } from '../../models/map';

import * as Highcharts from 'highcharts/highmaps';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
  private mapService: DbMapService;
  public maps: Array<Map>;

  public Highcharts: typeof Highcharts;
  public chartConstructor: string;
  public chartOptions: Highcharts.Options;
  public chartUpdate: boolean;

  constructor(mapService: DbMapService) {
    this.mapService = mapService;
    this.maps = [];

    this.Highcharts = Highcharts;
    this.chartConstructor = 'mapChart';
    this.chartOptions = { title: { text: 'test' },
                          series: [{ data: [{ id: 'ar', value: 7 }],
                                     mapData: [{ id: 'ar',
                                                 name: 'Hathr Kønthom Årgere',
                                                 path: 'M410.3426751082695,-1212.6972229007235C410.3318769155547...'}],
                                     type: 'map',
                                     joinBy: 'id' }]};
    this.chartUpdate = false;
  }

  async ngOnInit(): Promise<void> {
    await this.mapService.readAll().then(data => this.setData(data.pop()));
  }

  private setData(map: Map | undefined): void {
    if (!map) { console.error('No map data found.'); return; }

    this.chartOptions.title = { text: map.name };
    this.chartOptions.series = map.series;
    this.chartUpdate = true;
  }
}

I've added some of the mapData from the http response to the initialization of the chartOptions to see if my map data is incorrect but it is not. The initial mapData is drawn. After calling the update, the chartOptions.title as well as the chartOptions.series.data is updated (value for 'ar' changes from 7 to 1) but the chartOptions.series.mapData is not. I've set a breakpoint in the setData method and was surprised to see chartOptions.series to be undefined despite previous initialization but since the chartOptions.data gets updated nonetheless, I figured this is just how it is supposed to be.

The response of the http call is set up exactly like the initial assignment to this.chartOptions.series, but simply with more entries in data and mapData. The Map class has a string property 'name' and a Highcharts.SeriesOptionsType[] property 'series'. How can I update the chartOptions.series.mapData after my http request?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to update mapData within series for custom map

Hi,
Thanks for contacting us with your question.

I can't reproduce your case at the online code editor for more tests but I think you need an update in another way.

Have you tried to update using the example from our official angular wrapper?
Optimal way to update:
https://stackblitz.com/edit/highcharts- ... -to-update

https://github.com/highcharts/highchart ... e-examples

Let me know how are you going with this.
Best regards.
Sebastian Hajdus
Highcharts Developer
littlerave
Posts: 37
Joined: Sun May 16, 2021 4:17 pm

Re: How to update mapData within series for custom map

Hi,

thank you for the response. I don't see much of a difference between the two versions. Only that I replace the whole series list with a new one instead of replacing the first object in the list. However, as mentioned, my chartOptions.series is undefined, so I can't make an assigment to chartOptions.series[0].

Or am I misunderstanding what you mean?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to update mapData within series for custom map

Hi.
Thanks for the details.

Just by looking at your code, I can't quite get it.
Are you able to reproduce your example in the online editor?

Best regards.
Sebastian Hajdus
Highcharts Developer
littlerave
Posts: 37
Joined: Sun May 16, 2021 4:17 pm

Re: How to update mapData within series for custom map

Hi,

Sorry, for the late reply. I've replaced the local database service with a dummy and transferred the project to stackblitz with the issue still occurring: https://stackblitz.com/edit/angular-ivy-sm3s1e

As you can see, the initial series contains one element in the mapData and the corresponding element in data with value 1 and the title 'test'. After calling the database service, which returns a series with two entries in data and mapData after a three seconds delay, both the title and data get updated (it is 7 for the existing element afterwards) but mapData does not get updated and the 2nd element doesn't show up.

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

Re: How to update mapData within series for custom map

Hi,
Thanks for the demo.

These topics should interest you, the first one described on GitHub is about removing a series, adding a new one, and changing the map.
https://github.com/highcharts/highcharts/issues/7162

The following shows how to do an update via setData
viewtopic.php?f=14&t=43199#p152317
https://jsfiddle.net/BlackLabel/n6dztfsa/

Let me know if it is useful in your case.
Best regards.
Sebastian Hajdus
Highcharts Developer
littlerave
Posts: 37
Joined: Sun May 16, 2021 4:17 pm

Re: How to update mapData within series for custom map

Hi,

thank you for the links. Unfortunately, neither of them is useful in my case. The first one requires a call of

Code: Select all

this.chartOptions.series[0].remove(false)
and the latter to

Code: Select all

this.chartOptions.series[0].setData(map.series[0].data)
. As previously mentioned,

Code: Select all

this.chartOptions.series
is undefined in my case, so I cannot call either. Is there anything I'm doing wrong in the first place, which is accidentally causing the series to be undefined, when it actually shouldn't? If so, how could I solve this?

Additionally the latter link mentions "You could use setData() method, it is applying a new set of data, and by default redrawing the chart - but not rendering the whole map". I would assume that is exactly what I need however, redrawing the whole map, isn't it? Because I need a whole new map to be shown, with new vector lines for the countries that aren't there yet.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to update mapData within series for custom map

Hi,

Another approach would be to completely destroy the chart with the reference and create a new chart with the updated data.
https://stackblitz.com/edit/highcharts- ... mponent.ts

What do you think about it?

Best regards.
Sebastian Hajdus
Highcharts Developer
littlerave
Posts: 37
Joined: Sun May 16, 2021 4:17 pm

Re: How to update mapData within series for custom map

Well, this did work, thanks. But it feels like a hackish workaround and I'd rather like to know why the series is undefined in the first place.

In any case, I actually don't need the map before the map data is loaded. I only created it right away because I thought this was the only way to do it. Can I somehow use the callback function to delay the creation of the map until I have all the map data? That way I wouldn't have to create an empty map only to destroy it shortly afterwards to replace it with the real map.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: How to update mapData within series for custom map

Hi,

I suppose the series is undefined because it doesn't exist in its entirety yet, the highcharts object it's creating by parts.
And it's cover by angular hooks and force action by angular environment.

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”