How can I bind groupby data to a amcharts map - json

Question

I am facing problem while binding data to a map.
How I was binding data before. I had JSON data as records format
{
"latitude":39.7645187,
"longitude": -104.9951976,
"name": "ORCL",
"value":32,
"activeProducts":"127",
},
{
"latitude":49.619446,
"longitude": -128.695623,
"name": "RCXC",
"value":72,
"activeProducts":"789",
},
From above data, directly I was using lat, long to show circle on the map. name, value and activeProducts for tooltip.
Now I have grouped data based on name field which came after using reduce clause
CDFN: (26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
HCDR: (33) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
HVBL: (87) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
PCMD: (16) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}
Each single group have same data like lat, long, name. value(shown in first JSON data) is the count of each group records(CDFN: (26)). Data looks like this after expanding
{
"latitude":39.7645187,
"longitude": -104.9951976,
"name": "CDFN",
"activeProducts":"127",
"totalproducts":"140"
},
{
"latitude":49.619446,
"longitude": -128.695623,
"name": "HCDR",
"activeProducts":"789",
"totalproducts":"810"
},
Now my question
from above groups CDFN, HCDR, HVBL etc how can I get let and long of one records only to bind to map.
This is code I am using currently
public productsLocMap()
{
this.mapChart = am4core.create("stationsMap", am4maps.MapChart);
this.mapChart .geodata = am4geodata_worldLow;
this.mapChart .projection = new am4maps.projections.Miller();
this.polygonSeries = this.mapChart .series.push(new am4maps.MapPolygonSeries());
this.polygonSeries.useGeodata = true;
this.polygonSeries.strokeWidth = 0.5;
let imageSeries = this.mapChart .series.push(new am4maps.MapImageSeries());
imageSeries.dataFields.value = "value";
var place = imageSeries.mapImages.template;
place.nonScaling = true;
place.propertyFields.latitude = "latitude";
place.propertyFields.longitude = "longitude";
imageSeries.data=Stations.Stations;
var circle = place.createChild(am4core.Circle);
circle.fillOpacity = 0.7;
circle.propertyFields.fill = "color";
circle.tooltipText = "[bold]{name}:[/]\nCompliance Devices: {activeDevices}\nTotal devices:{totalDevice}";
place.events.on("hit", (ev)=>{
console.log(ev.target.dataItem.dataContext.title)
})
imageSeries.heatRules.push({
"target": circle,
"property": "radius",
"max": 15,
"dataField": "value",
})
}
Below lines are important where I am binding data
imageSeries.data=Stations.Stations;
imageSeries.heatRules.push({
"target": circle,
"property": "radius",
"max": 15,
"dataField": "value",
})
I tried doing this but not showing anything on map
imageSeries.data=group;

Answer 1

AmCharts expects an array for the data property in a series or chart object, not an object/map that points to an array. You need to assign an array to it directly. You can create multiple image series and assign a group to each one, e.g.
series1.data = group.CDFN;
// ...
series2.data = group.HCDR;
// ...
// etc