It is currently Tue Apr 24, 2018 8:26 am Advanced search

Maps drill down issue with react + redux

Technical support, bug reports and more.

Maps drill down issue with react + redux

Postby ghanshyamdrathod » Fri Apr 13, 2018 9:34 am

Hello,

I am using Highcharts with react to draw world map & maps drill down. Here is my requirement to load charts data.

On chart load I am firing API request to load all counties data that will embed with GeoJson to show values to each county.

On click of any country I have to fire new API request to fetch all region data associated with this county, i am using props to fire redux action and to get the results via props. but I am getting this issue after clicking on any country 'VM9440:11 Uncaught TypeError: Cannot read property 'xAxis' of null', & getting 'this' chart object as empty.

Here is my code that I am using to draw highchart & to do drill-down.

export function renderMaps(chart, series, props) {
let mapsData = Highcharts.geojson(worldMapData);

//Maps drill-down country-> data mapping
const geoJsonDataMapping = {
ar: ar,
au: au,
br: br,
ca: ca,
cn: cn,
de: de,
fr: fr,
"in": india,
jp: jp,
nl: nl,
us: us
};

console.info(geoJsonDataMapping + drillDownCountries);

const samplePayload= {
"reportedAtStart":"2013-07-01",
"reportedAtEnd":"2018-03-30",
"filter": {
"countries":["244"]
}
};

_.map(
mapsData, (item) => {
if (!_.isUndefined(item.properties)){
const getDetails = _.find(series, {label: item.name});

item.drilldown = item.properties.iso_code;
item.value = _.isUndefined(getDetails) ? 0 : getDetails.value;
item.payload = samplePayload;
}
}
);


return _.merge(
{
chart : {
height: 635,
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
const chartObject = this,
mapKey = _.lowerCase(e.point.drilldown);

//don't do map drill down for this countries
if (!_.includes(drillDownCountries, mapKey)) {
return;
}

//Do drill down for selected country only
if (_.includes(drillDownCountries, mapKey)) {
//Make call to "listen_activity_by_state" metric
props.fetchRegionData(e.point.payLoad, props.chart.get("id"));

mapsData = Highcharts.geojson(geoJsonDataMapping[mapKey]);
// FOR NOW: Set a non-random bogus value
_.map(mapsData, (item, i) => item.value = i);

// Hide loading and add series
//chart.hideLoading();
chartObject.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: mapsData,
dataLabels: {
enabled: false,
format: '{point.name}'
}
});
}
}
},
drillup: function () {
this.setTitle(null, { text: '' });
}
}
}
},
{
series: [{
data: mapsData,
name: "Mentions",
dataLabels: {
enabled: true,
format: '{point.properties.postal-code}'
}
}, {
type: 'mapline',
color: 'silver',
enableMouseTracking: false,
animation: {
duration: 500
}
}]
},
{
colorAxis: {
min: 0
}
},
getCredits(),
selectLegend(chart),
getTitle()
);

}

The other question is from props how can I pass values to the highcharts function?
ghanshyamdrathod
 
Posts: 1
Joined: Fri Apr 13, 2018 9:12 am

Re: Maps drill down issue with react + redux

Postby daniel_s » Fri Apr 13, 2018 10:45 am

hi ghanshyamdrathod,

Could you reproduce your project with example data in Stackblitz platform or similar? It's hard to deduce what is going wrong, but I suspect that you're trying to refer to chart, which is actually undefined, that's why I'm asking for the minimal live working example.

Best regards!
Daniel Studencki,
Highcharts Developer
daniel_s
 
Posts: 523
Joined: Fri Sep 01, 2017 1:01 pm


Return to Highmaps Usage

Who is online

Users browsing this forum: No registered users and 0 guests