CODEWITHSUNDEEP
javascripthighcharts
wergeld
wergeld

Reputation: 14462

How To Use Highmaps Data In JSON Not Labeled 'value'

I have a data set that contains many fields. I have no control over the creation of this JSON. Sample:

data = [
    {
    'maparea':'3704000063',
    'relatedsource':null,
    'empcount':'198390',
    'response':'78',
    'mean':'61663.00',
    },
...
]

The chart code is:

Highcharts.mapChart('container', {
    chart: {
        map: geojson
    },

    title: {
        text: 'GeoJSON in Highmaps'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        tickPixelInterval: 100
    },

    series: [{
        data: data,
        keys: ['maparea', 'relatedsource', 'empcount', 'response', 'mean'],
        joinBy: ['fips', 'maparea'],
        name: 'Random data',
        states: {
            hover: {
                color: '#a4edba'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.properties.postal}'
        }
    }]
});

The geoJSON uses fips to label the areas (in this case counties in NC). The map shows the state and county elements. However, no data is used to plot. This is because the HighMaps code is expecting a value element to be present in the data I think.

Is there a way to tell HighMaps what element in the data set to use to shade the choropleth?

Upvotes: 0

Views: 206

Answers (1)

Todd Chaffee
Todd Chaffee

Reputation: 6824

I don't see any option to map your unique data shape to the expected keys in the data according to the docs. Per your comment this is possible with an array, but it doesn't seem to be possible with an object.

However, it's pretty simple to just remap your object to the required shape. The code below gives a partial example.

let dataMapped = data.map(obj => { 
   var median = Number(obj.median);       
   return Object.assign(obj, { name: obj.maparea, value: median });
});

And then use dataMapped as the value for your data.

There might be a more elegant way to do this in ES6 with object spread and avoid the Object.assign I am using to merge the old object with new attributes, but I don't have time to research that at the moment.

Upvotes: 1

Related Questions