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?