API is being called to display data in the chartOptions. However, I am encountering an issue trying to pass it through this.letsTry. I am unsure where I am making a mistake.
[data-local.component.html]
<highcharts-chart id="container" [Highcharts]="Highcharts" [constructorType]="chartConstructor" [options]="chartOptions" style="width: 100%; height: 550px; display: block;">
</highcharts-chart>
[data-local.component.ts file]
import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { DatalocalService } from 'src/app/services/datalocal.service';
import Highcharts from 'highcharts/highmaps';
import MapModule from 'highcharts/modules/map';
declare var require: any
const mapWorld = require('@highcharts/map-collection/custom/world.geo.json')
MapModule(Highcharts);
@Component({
selector: 'app-data-local',
templateUrl: './data-local.component.html',
styleUrls: ['./data-local.component.scss']
})
export class DataLocalComponent implements OnInit {
skipCountryVal: boolean = false;
letsTry = [];
constructor(
private commonService: CommonService,
private local: DatalocalService
) { }
ngOnInit(): void {
let args1 = {
'body': `query {
DataLocal(skip: ${this.skipCountryVal ? 1 : 0}, first: 10) {
Count
Code
}
}
`
};
this.DataLocal(args1);
}
Highcharts: typeof Highcharts = Highcharts;
chartConstructor = "mapChart";
chartData = [{ code3: "ABW", z: 105 }, { code3: "AFG", z: 35530 }];
chartOptions: Highcharts.Options = {
chart: {
map: mapWorld
},
title: {
text: "Data local report"
},
subtitle: {
text:
// 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world.js">World, Miller projection, medium resolution</a>'
''
},
mapNavigation: {
enabled: true,
buttonOptions: {
alignTo: "spacingBox"
}
},
legend: {
enabled: true
},
colorAxis: {
min: 0
},
series: [
{
type: "map",
name: "Random data",
states: {
hover: {
color: "#24e9ad"
}
},
dataLabels: {
enabled: true,
format: "{point.name}"
},
allAreas: true,
data: this.letsTry
}
]
};
// data localization api
DataLocal(args1) {
this.localService.DataLocal(args1).subscribe(
(data) => {
let tempGeoData = [];
let apiGeoData = data['data']['DataLocal'];
for (let i = 0; i < apiGeoData.length; i++) {
tempGeoData.push(
[
data['data']['DataLocal'][i]['Code'],
data['data']['DataLocal'][i]['Count']
]
)
// this.chartOptions.data[i] = tempGeoData[i];
this.letsTry = tempGeoData;
}
console.log('Data from API', this.letsTry);
}
)
}
}
[sample data from API]
{
"data": {
"DataLocal": [
{
"CodeCount": 1998,
"Code": "au"
},
{
"CodeCount": 7422,
"Code": "fr"
},
{
"CodeCount": 3062,
"Code": "in"
},
]
}
}