[FullCalendar 2] Creating a heatmap

Forge Component
(24)
Published on 29 Mar by Daniel Filipe
24 votes
Published on 29 Mar by Daniel Filipe

Hi,

I'm trying to use FullCalendar2 to get a heatmap of how many events are taking place on certain days. I'm using the CalendarBackground web screen, and it is populating correctly. I've tried using nested Ifs in the 'newEventSourceData' where you specify the background colour, but couldn't find how to use a sort of 'count' on number of events in a day to give a certain gradient of background colour. If anyone could point me in the right direction that would be greatly appreciated.

Thanks,

Aaron

Aaron, not sure if your question is asking on how to get the counts of items per day or how to use the count that you get to set a gradient.  For the first I would do the aggregate with group by to get it down to where one section is a day and then do a count of id's.  For the second what I would do is first find out what your range of values are.  In other words is the highest # of events on one day 100 and the lowest 10?  If so then for doing the background color I would pick a color I want to use for the heat (say red) and then for each days background color take 0-255 and equate it to that range (as stated above 10=0 and 100=255) and then use that to set the background color using RGB.  Let me know if that answers your question(s).

Oh - also unless you really want to use fullcalendar for any of our visualization of data we have switched over to doing our own highcharts with customized code per application - they have a heatmap example and it does make a heat map using day of week.  Not exactly what I think you are doing but close enough you should be able to mod the example to fit your needs. https://www.highcharts.com/demo/heatmap

Thank you for the reply, it helped me along the right lines. I have managed to make an aggregate which which has a count of events for each day. However, I'm struggling to use this to modify the backgroundColour. I'm using this in the expression:

SyntaxEditor Code Snippet

If (GetUsersTimeOffs2.List.Current.Count = "1", "red",
If (GetUsersTimeOffs2.List.Current.Count = "2", "yellow",
If (GetUsersTimeOffs2.List.Current.Count = "3", "green",
If (GetUsersTimeOffs2.List.Current.Count = "4", "blue",
If (GetUsersTimeOffs2.List.Current.Count = "5", "orange",
If (GetUsersTimeOffs2.List.Current.Count = "6", "purple",
If (GetUsersTimeOffs2.List.Current.Count = "7", "brown",
If (GetUsersTimeOffs2.List.Current.Count = "8", "cyan",
If (GetUsersTimeOffs2.List.Current.Count = "9", "black",
"white")))))))))

and it only uses purple. I'm assuming it's because it is only iterated once and takes the first Current, which is 6 and just applies it to the rest of the days. Is there a way to use it so it calculates for each day in the calendar individually within a certain time frame?

Solution

Aaron Gordon wrote:

Thank you for the reply, it helped me along the right lines. I have managed to make an aggregate which which has a count of events for each day. However, I'm struggling to use this to modify the backgroundColour. I'm using this in the expression:

SyntaxEditor Code Snippet

If (GetUsersTimeOffs2.List.Current.Count = "1", "red",
If (GetUsersTimeOffs2.List.Current.Count = "2", "yellow",
If (GetUsersTimeOffs2.List.Current.Count = "3", "green",
If (GetUsersTimeOffs2.List.Current.Count = "4", "blue",
If (GetUsersTimeOffs2.List.Current.Count = "5", "orange",
If (GetUsersTimeOffs2.List.Current.Count = "6", "purple",
If (GetUsersTimeOffs2.List.Current.Count = "7", "brown",
If (GetUsersTimeOffs2.List.Current.Count = "8", "cyan",
If (GetUsersTimeOffs2.List.Current.Count = "9", "black",
"white")))))))))

and it only uses purple. I'm assuming it's because it is only iterated once and takes the first Current, which is 6 and just applies it to the rest of the days. Is there a way to use it so it calculates for each day in the calendar individually within a certain time frame?

Aaron - so I wouldn't do that type of color scheme for a heat map.  Most people are going to look at a heat map and want to know lighter to darker to easily determine low to high density.  If you have multiple colors like that I think it might get confusing as far as if cyan is more than orange etc etc.

Ok - so the reason you are only getting purple is probably because you are not using this if in a loop?  If this is just on the page somewhere then the .current is just the last item in the list.  What I would do is make a new column in the aggregate and have the color set there.  That way you can see it in the aggregate when you are developing and make sure the colors are correct.  However, as stated above I wouldn't do it with a rainbow like you are doing above for a heat map.  I would pick a color and then go light to dark with it.


Solution

Thanks for your help! 

The colour scheme was just for ease of identifying whether it was working as intended, as it already does a sort of heatmap anyway with darker colours depending on number of overlapping events. I used your suggestion and it worked, grouped by date, and the count of ID in each date, then added the If formula as a new attribute in the aggregate and used that in the backgroundColour of 'New Event Source Data' and it worked :-)



Cool beans - glad it worked.  BTW, pick one of my posts and mark it as the solution please.