dattatraya.chavhan
Posts: 5
Joined: Tue Jul 25, 2023 5:12 am

Austria country not working when updating data in loop for achieve animation

Tue Jul 25, 2023 6:18 am

const newData = [{name: 'Austria', code : 'AT', color : '#c4c4c4']]


this.chart.series[0].points.forEach(
(point: any, index: any) => {
setTimeout(() => {
const newDataPoint: any = newData.find(
(dataPoint: any) => dataPoint.code === point['iso-a2']
);

if (newDataPoint) {
let countryColor = newDataPoint?.[this.mapColorKey] || '#c4c4c4';

const currentColor = point.color || '#ffffff';

let start = {
r: parseInt(currentColor.substr(1, 2), 16),
g: parseInt(currentColor.substr(3, 2), 16),
b: parseInt(currentColor.substr(5, 2), 16),
};
let end = {
r: parseInt(countryColor.substr(1, 2), 16),
g: parseInt(countryColor.substr(3, 2), 16),
b: parseInt(countryColor.substr(5, 2), 16),
};
let current = { r: start.r, g: start.g, b: start.b };
let startTime: any = null;

const animateColor = (timestamp: number) => {
if (!startTime) startTime = timestamp;
const progress = timestamp - startTime;
const ratio = Math.min(progress / animationDuration, 1);

current.r = Math.round(start.r + (end.r - start.r) * ratio);
current.g = Math.round(start.g + (end.g - start.g) * ratio);
current.b = Math.round(start.b + (end.b - start.b) * ratio);

const rgbColor = `rgb(${current.r}, ${current.g}, ${current.b})`;
point.update({ color: rgbColor }, true, false);

if (progress < animationDuration) {
requestAnimationFrame(animateColor);
}
};

requestAnimationFrame(animateColor);
}
}, index * (animationDuration / totalPoints));
}
);

Please refer above code and what is the issue and suggest solution.
Thank you

jakub.s
Posts: 968
Joined: Fri Dec 16, 2022 11:45 am

Re: Austria country not working when updating data in loop for achieve animation

Tue Jul 25, 2023 7:42 am

Hi,

Welcome to our forum & thanks for the question!

Could you please try to reproduce this issue in an online code editor like JSFiddle? Here's a link to all the Map demos you can start from to reproduce this problem: https://www.highcharts.com/demo/maps/all-maps

I'll then take a look, figure out what's the issue, and hopefully propose a solution to this problem.

Best regards!
Jakub
Highcharts Developer

dattatraya.chavhan
Posts: 5
Joined: Tue Jul 25, 2023 5:12 am

Re: Austria country not working when updating data in loop for achieve animation

Wed Jul 26, 2023 6:18 am

Hi,

https://jsfiddle.net/v8umf0eq/

Please have a look of the above url, I have added 3 countries manually but not working for Austria.

Best Regards!

jakub.s
Posts: 968
Joined: Fri Dec 16, 2022 11:45 am

Re: Austria country not working when updating data in loop for achieve animation

Wed Jul 26, 2023 8:57 am

Hi,

Thanks for sharing your code!

You're absolutely right - there is a clear issue here with Austria and some other European countries and from what I've found it's related to the joinBy property (https://api.highcharts.com/highmaps/series.map.joinBy).

Once you go back to the default settings of the joinBy property everything seems to work correctly: https://jsfiddle.net/BlackLabel/qpdeajkh/

I think that reverting back to the default settings of this property is the best way to go in this scenario. In case you have to use joinBy: ['iso-a3', 'code3'] then I could dive deeper into why this happens.

Please let me know if this helps.

Kind regards!
Jakub
Highcharts Developer

dattatraya.chavhan
Posts: 5
Joined: Tue Jul 25, 2023 5:12 am

Re: Austria country not working when updating data in loop for achieve animation

Wed Jul 26, 2023 10:15 am

Hi,

Thank you for quick reply with solution, as of now working fine after going to default setting.

Please have a look what is going wrong with joinBy property.

Best regards!

jakub.s
Posts: 968
Joined: Fri Dec 16, 2022 11:45 am

Re: Austria country not working when updating data in loop for achieve animation

Thu Jul 27, 2023 8:49 am

Hi,

I've investigated this issue and found out why it's not working.

As you can read in the API (https://api.highcharts.com/highmaps/series.map.joinBy):
The joinBy option can also be an array of two values, where the first points to a key in the mapData, and the second points to another key in the data.

So, your previous configuration seems to have been incorrect. It worked for India and Canada kind of by accident.

Here's another example: https://jsfiddle.net/gh/get/library/pur ... o/geojson/

Your second value should be your custom key in the data which is used to "join" data with topology (https://jsfiddle.net/BlackLabel/ga5hxqwL/).

Please let me know if everything's clear.

Best regards!
Jakub
Highcharts Developer

Return to “Highcharts Maps”