dansherwin
Posts: 4
Joined: Thu Jun 30, 2022 12:25 am

Frustrated and irritated needs help with config

Hello. I have been working on getting a heat map created and I cannot for the life of me figure out the config to make it happen. The data that I have is an array of timestamps and values:

Code: Select all

[[1641020400000, -14],[1641024000000, 63],[1641027600000, 53]]
An easy way to generate dummy data for this is:

Code: Select all

var a = [];
for(let i=0; i<72; i++) a.push([(new Date((new Date('01/01/2022 00:00:00')).getTime()+(i*3600000))).getTime(),Math.round(Math.random() * (100 - -100) + -100)]);
The timestamp is incremented by 1 hour. The data will have a full week, so 168 samples (7*24), The values can be values from -100 to 100. I want a heatgraph where each column would be one day, and each row one hour of that day, and I want the value to be in each cell. An example screenshot of a heatmap I found that would be what I would like is this:

Image

Can anyone please help with a heatmap config to be able to generate this? It would be greatly appreciated. I have gone through the heatmap examples and the documentation but cant seem to put it all together.
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Frustrated and irritated needs help with config

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

I have made an example demo for you. I have to change a little bit function to generate the data. I think the best way will be to use yAxis.type set to 'category' to show yAxis labels as '12 AM' etc. Please, check the demo below.

Demo: https://jsfiddle.net/BlackLabel/ze6c8gs4/
API Reference: https://www.highcharts.com/docs/chart-a ... es/heatmap

Let me know if that fits your requirement.
Kind regards!
Hubert Kozik
Highcharts Developer
dansherwin
Posts: 4
Joined: Thu Jun 30, 2022 12:25 am

Re: Frustrated and irritated needs help with config

Hello hubert!

Thank you, thank you, thank you, thank you! This was the exact thing I needed. I was close but the little things you showed on here fixed it all.

One quick item though. In the heatmap datalabels format function, you have:

Code: Select all

                    dataLabels: {
                        enabled: true,
                        formatter: function() {
                            return '$' + this.y;
                        }
                    }


It looks like that is showing me the hour of the day in the cell instead of the actual value. What is the variable to get the actual value? this.value?
dansherwin
Posts: 4
Joined: Thu Jun 30, 2022 12:25 am

Re: Frustrated and irritated needs help with config

Disregard, I figured it out. It should be this.point.value.

Once again, I greatly appreciate your help. Fit my requirements perfectly!!

}Dan
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Frustrated and irritated needs help with config

Dan,
You're welcome! In case of any further questions, feel free to contact us again. :)
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”