dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Heatmap with datetime data

Hi, we have a large data set and would like to plot it as heatmap, see example:
https://jsfiddle.net/statistik_tg/srdp86tc/
Unfortunately, it does not work properly, but I can't find the error. Could you give me a hint.
Thanks,
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Heatmap with datetime data

Hello,

Here you have the simplest example using datetime type on xAxis: https://jsfiddle.net/BlackLabel/t54nhgbj/

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Re: Heatmap with datetime data

Hi Michal,
Thanks for your reply and the link. As I am not that familiar with Javascript and we have other charts, where the setting with the csv-import works that way, I would be glad if you could tell me where in my example the error is and what to change.

Thank you and kind regards,
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Heatmap with datetime data

Hi,

Your demo missing the series.heatmap.rowsize and series.heatmap.colsize properties, so the chart uses the default values and although it generates the heatmap it does it in such a way that the final points are not visible. Manually setting rowsize and colsize will solve the problem. Unfortunately in your case the dates are irregular so you will either have to hide some of the values by increasing the size or there will be empty spaces.

Demo: https://jsfiddle.net/BlackLabel/bt5wg0f8/
API: https://api.highcharts.com/highcharts/s ... ap.rowsize
https://api.highcharts.com/highcharts/s ... ap.colsize

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Re: Heatmap with datetime data

Thank you for your reply and the hint with code. Now, it works! Kind regards,
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Heatmap with datetime data

You're welcome! In case of any further questions, feel free to contact us again.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Re: Heatmap with datetime data

Hi Michal,
I have indeed a further question regarding the tooltip. In other plots, where we use the same csv-input, we get the correct date with day, month and year by including xDateFormat: '%e. %B %Y' in the tooltip variable. This, however, does not work in the example above. What would the correct syntax be to get a propoer date within the tooltip?
Thanks and kind regards,
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Heatmap with datetime data

Hello,

If you want to show a date in this format, you can use tooltip.pointFormat in this way:

Demo: https://jsfiddle.net/BlackLabel/6n2asz1f/
API: https://api.highcharts.com/highcharts/t ... ointFormat

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
dktg
Posts: 151
Joined: Mon Jan 29, 2018 2:19 pm

Re: Heatmap with datetime data

Hi Michal,
Thank you, that's is exactly what I was looking for.
Kind regards,
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Heatmap with datetime data

That's great to hear!

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

Return to “Highcharts Usage”