20thcw_dev
Posts: 14
Joined: Thu Nov 02, 2023 6:51 pm

Heatmap question

HI,

I'm fairly new to using HighCharts, but I really appreciate how awesome this community forum is! I've learned so much lurking! :D

I'm curious about this example: https://jsfiddle.net/BlackLabel/xLceqjf3/. Is there a way to use this type of heatmap could continuously have additional months added, so each block is its own month, give the user the ability to scroll across the page and be able to see them all if downloading it into a pdf? It's basically a static webpage getting updated with json data, but each month is self-contained. We have been alternating between that or the original heatmap style with it all in one block. I'm just curious if it is even possible?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Heatmap question

Welcome to our forum and thanks for contacting us with your question
I'm happy to hear that you enjoy our community!

I modified your demo in such way that you can freely add and remove months that stack into 2 columns and than they create multiple rows. To add a new series, I used chart.addSeries with previously parsed data. On adding a new row, the chart resizes using chart.setSize.

I'm not sure if that is exactly what you meant, but if not, please let me know and I will be more than happy to help you!

Demo: https://jsfiddle.net/BlackLabel/wjrvg13b/

Feel free to ask any further questions!
Kind regards
Jakub
20thcw_dev
Posts: 14
Joined: Thu Nov 02, 2023 6:51 pm

Re: Heatmap question

Thank, Jakub! This is helpful. I have a follow-up question. Is it possible to have all of those maps present on page load instead, and then wrap them that way? Ideally, it will allow a user to print the PDF of the CSV for it in a way that shows all of the data, but legibly. I think this is headed in the right direction and I am so appreciate of your time on this!
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Heatmap question

Hey, you're welcome!

I modified your demo in such way that you have two different variables for normal state and printing state: numberOfElementsInTheRow and numberOfElementsInTheRowWhenPrinting. When printing the chart, all the series are updated so that the number of columns changes.
After printing, everything goes back to how it was before.

Demo: https://jsfiddle.net/BlackLabel/tj8wbcqm/

Let me know if that was what you were looking for!
Best regards
Jakub
20thcw_dev
Posts: 14
Joined: Thu Nov 02, 2023 6:51 pm

Re: Heatmap question

Thank you again, Jakub! For now I think that solves my question! Appreciate your quick and helpful responses! :D
20thcw_dev
Posts: 14
Joined: Thu Nov 02, 2023 6:51 pm

Re: Heatmap question

Hi,

I have a follow-up question. I've got a heatmap set up differently but still showing individual months in a similar fashion to here, but created from a nested object of objects in the json, transporting that data in and then manipulating it with JS to split up each month into a new object (if returning with an object.values it is an array of each month's object). I can't quite get the same logic working here to translate so that at 4 columns, a second row would immediately begin with the 5th month and trying to brainstorm other ways of approaching this. The data returns visually as it should, but it just won't wrap and it is set-up so differently from here. Would you have any suggestions?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Heatmap question

Hey!

Could you please add the data in the format that you are talking about to the demo so that the problem occurs?

Than, I will be able to reproduce this and try to help you.

Kind regards
Jakub
20thcw_dev
Posts: 14
Joined: Thu Nov 02, 2023 6:51 pm

Re: Heatmap question

Thanks!

So perhaps a better example is this mock chart: https://jsfiddle.net/BlackLabel/zypnwq50/. I'm working with a current set-up is very similar to this except that the data is being set differently to create separate months with an array of month objects. However, whereas if you fiddle with the width here, it will change how many months are displayed before a new row wraps with the content. I am unable to get it working and I can't quite determine despite a lot of trial and error why this works the way it does, when the other doesn't.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Heatmap question

Hey!

I integrated your data into the previous demo I've sent you.

Demo: https://jsfiddle.net/BlackLabel/oebvf547/

I'm not sure if that's exactly what you meant but it should help you resolve your issue.

Let me know if that is what you needed!
Kind regards
Jakub
20thcw_dev
Posts: 14
Joined: Thu Nov 02, 2023 6:51 pm

Re: Heatmap question

Hi Jakub,

Thank you!

Kind of - but I'm looking for it more to display similar to this on page load: https://jsfiddle.net/BlackLabel/zypnwq50/. My layout is more similar to this in that it will all be showing without needing to access a button and can be conditionally rendered regardless of how many months are added. I have a more similar set-up to this in terms of chart options laid out, but the most recent jsfiddle you shared, and is more similar to the data set that is being worked from. At the moment, I'm trying to work through with both of these as guides.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Heatmap question

Hey!

I implemented my logic into your demo, see:

Demo: https://jsfiddle.net/BlackLabel/dkLsna7g/

I hope you find it useful.
KInd regards
Jakub
20thcw_dev
Posts: 14
Joined: Thu Nov 02, 2023 6:51 pm

Re: Heatmap question

Thank you! I am still having some trouble trying to implement what you did.

If I console.log how the output of my data is created with the calendar to the get months, it looks like this:

Code: Select all

monthsArr 
Array(9)
0
: 
{data: Array(31), name: "Jan '23"}
1
: 
{data: Array(28), name: "Feb '23"}
2
: 
{data: Array(31), name: "Mar '23"}
3
: 
{data: Array(30), name: "Apr '23"}
4
: 
{data: Array(31), name: "Jul '23"}
5
: 
{data: Array(31), name: "Aug '23"}
6
: 
{data: Array(30), name: "Sep '23"}
7
: 
{data: Array(31), name: "Oct '23"}
8
: 
{data: Array(30), name: "Nov '23"}
length
: 
9
[[Prototype]]
: 
Array(0)
monthsArr is actually being set this way: const monthsArr = Object.values(seriesData)
console.log("monthsArr", monthsArr)

return monthsArr;

Because the series is created this way and then it is called in the series section of the Highcharts object, I think this is the disconnect, but I'm not sure. I've tried to split by counting rows, but that doesn't seem to work either. It gets set:

Code: Select all

 series: formatData(props.data.OBJ_NAME["Daily Total"].amount),
It does display correctly broken into months, but it will not let me wrap it regardless. Would you have any suggestions? I'm trying to work with the example you shared.
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Heatmap question

Hey!

Could you please reproduce the problem in a demo? I'm not quite sure what is wrong in your configuration.

If wrapping doesn't work for you, please show me the content of the data for e.g. November, it should be positioned correctly in the second row if it was wrapped.

I changed the previous demo so that the data is generated statically before chart initialization and I console.log the readyMonthsData before applying it to the chart, see:

Demo: https://jsfiddle.net/BlackLabel/0huL61fa/

I hope you find it useful
Kind regards
Jakub
20thcw_dev
Posts: 14
Joined: Thu Nov 02, 2023 6:51 pm

Re: Heatmap question

Ooops, just seeing this.

Thank you for your help!

This is a mock jsfiddle: https://tinyurl.com/5n8nkdyf of the original set-up that cannot get to wrap after setting a max # for the row to return a new one.
daniel_s
Posts: 768
Joined: Fri Sep 01, 2017 11:01 am

Re: Heatmap question

Hi 20thcw_dev,

Could you elaborate on the problem you have with your demo?
Unfortunately we can't get to the point what is wrong with this one. Did you mean the months should be wrapped to the next line when the numberOfElementsInTheRow exceeded?
I also see your calculations are written in a completely different way than on our demo, so it needs to deeply debug it, but I suspect there is some calculation mistake committed within the code, or lack of the part when the row counter is set to zero and the column number is increased.
As you can notice in our code we do something like this:

Code: Select all

if (dataRow > 6) {
  dataRow = 0;
  dataColumn++
}
Could you spot the place within your code where do you do the similar move?

Kind Regards!
Daniel Studencki,
Highcharts Developer

Return to “Highcharts Usage”