newbie07
Posts: 4
Joined: Thu Sep 30, 2021 9:47 am

Display a time series in Highcharts Maps

Hi,
I'm quite new in using Highcharts and need some help :)

I want to display a time series for a specific region, in particular the expected populations average age. I couldn't find anything to add a time bar or something similar.

My current code looks like this: https://jsfiddle.net/grafzahl/1Lvjmg4s/21/

Many thanks in advance.

Newbie07
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Display a time series in Highcharts Maps

Hello newbie07,

Welcome to our forum and thanks for contacting us with your question!

Could you provide me with more details and preferably illustrations showing what would you like to achieve? In the demo that you shared the color axis shows average population age in hovered region. What would you like to change with that? Please tell me more about the time bar too.

Thanks in advance for any additional informations.
Best regards!
Mateusz Bernacik
Highcharts Developer
newbie07
Posts: 4
Joined: Thu Sep 30, 2021 9:47 am

Re: Display a time series in Highcharts Maps

Hi Mateusz,

Thanks for your replay. I want to display something like this: https://statistik.arbeitsagentur.de/DE/ ... r-Nav.html (sorry, could just find a German page). How you can see, the map changes its appearance over time, depending on the specific data point. That's what I mean with a time bar. But it doesn't need to look like the specific example and I don't need a "play" button necessarily.

In my example I included just three data points for each region ("Landkreis") for the moment. As soon as I know the logic I would add more.

I hope, that makes clear what I want to achieve.

Newbie07
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Display a time series in Highcharts Maps

Hi newbie07,

Thanks for that clarification, everything makes sense now.

Something like that is definitely possible. Basically what you need to do is to update your chart over time. In this article you can find detailed explanation how to achieve exactly what you want: https://www.highcharts.com/blog/tutoria ... in-motion/

Demo with example: https://jsfiddle.net/larsac07/mgc2fgc1/

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer
newbie07
Posts: 4
Joined: Thu Sep 30, 2021 9:47 am

Re: Display a time series in Highcharts Maps

Thanks a lot mateusz.b! That's exactly what I was looking for. However, as soon as I try to copy the demo 1:1 to my fiddle account to adopt it to my use case, I get a error message which I can't really understand neither solve: <a class='gotoLine' href='#87:1'>87:1</a> Uncaught ReferenceError: $ is not defined

https://jsfiddle.net/grafzahl/m0j7b39q/1/

Thanks in advance for your help!
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Display a time series in Highcharts Maps

Hello newbie07,

The example that I shared was jQuery based and that entry with $ mark is characteristic for jQuery. Your demo is completely correct, all you have to do is to load jQuery module here:
jquery.png
jquery.png (56.43 KiB) Viewed 1133 times
Demo: https://jsfiddle.net/BlackLabel/oeujz2rs/

Feel free to ask any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer
newbie07
Posts: 4
Joined: Thu Sep 30, 2021 9:47 am

Re: Display a time series in Highcharts Maps

Hi mateusz.b,
I'm almost there but I have one (hopefully) last question/issue: I want to display the development over 11 years. Since I added two years compared to the Australian example, I adjusted the max="8" in the input definition to 10. But in that case the update function doesn't seem to work properly since it stops after the third year (2012). If I leave the max="8" the function just goes until 2018.

So, what do I have to adjust as soon as I add additional years?

https://jsfiddle.net/grafzahl/m0j7b39q/68/

Thanks in advance! You notice, my username hat a reason ;)
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Display a time series in Highcharts Maps

Hello newbie07,

Here is corrected version, it should work now: https://jsfiddle.net/BlackLabel/7nuzj4dq/
There was a problem with this slice of code:

Code: Select all

   if (input.value >= input.max) { // Auto-pause
            pause($('#play-pause-button')[0]);
        }
The condition failed because number and string were being compared.

Feel free to ask any further questions.
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”