MT_MANC
Posts: 81
Joined: Fri Mar 25, 2016 1:35 pm

Animated (Geographic) Heatmap of External Time Series Data ?

Other than the initial Map "on-load animation", are there any HighMaps demos of Geographic heatmaps where the Heatmap "colour density" can evolve over time (eg maybe with an auto-play date slider) as the time series data evolves over the years?
eg adding an auto-play date slider to this static heatmap example to show how relative national Population density evolves over the years ?

https://www.highcharts.com/demo/maps/data-class-ranges

The closest example I could find was in R for a (non-geographic) example https://rpubs.com/jbkunst/questions-42945062 - see bottom of page

Any pointers for HighMaps appreciated
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Animated (Geographic) Heatmap of External Time Series Data ?

Hello,

We don't have such a demo but I wrote it quickly. I will not elaborate on the slider logic because it is pure JavaScript, I will only indicate that the chart is updated on line 103 using the setData() method on the chart series.

Demo: https://jsfiddle.net/BlackLabel/d4gac57o/
API: https://api.highcharts.com/class-refere ... es#setData

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
MT_MANC
Posts: 81
Joined: Fri Mar 25, 2016 1:35 pm

Re: Animated (Geographic) Heatmap of External Time Series Data ?

Michal
Most kind - I have tried to combine your helpful year slider fiddle example with a Highmaps Geographic example file that is both: (i) geographic and (ii) reading external .CSV data. See my fiddle: https://jsfiddle.net/MT_MANC/qe2b9u7x/15/
I believe I have imported all the required code from your fiddle into the Highmaps geographic example/hybrid but cannot seem to connect up the Year slider js to sequentially advance the time series plot; unfortunately, I'm not getting any error messages in browser (Chrome/Mozilla) console to work with after clicking "Play" arrow on slider !?
From prior experimentation possible code errors causing this are:
Line 267:

Code: Select all

data: data[0].points,
Line 279:

Code: Select all

mapChart.get('us').select();
Any hints on how to correct the above errors & properly connect the slider gratefully appreciated.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Animated (Geographic) Heatmap of External Time Series Data ?

Hi,

The demo I sent you is based on a strictly defined data structure that is at the beginning of the code. The demo with the map you are trying to convert is based on CSV which you need to customize to add slider functionality. You need to analyze the code of this demo and parse the received CSV. It is a matter of understanding the code and working with data strictly in JavaScript.

Regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Maps”