Arcade Code for Heat Chart

LaurenCammack01 — Mon, 14 Aug 2023 12:52:40 GMT

At the UC this year I went to an arcade course for dashboards where it was demonstrated that you can use arcade to create heat charts. I'm looking for that sample code to create a day of week and hour of day heat matrix for police data.

If anyone has a base code or example of how to do this it would be greatly appreciated!

Re: Arcade Code for Heat Chart

AmeWunderle — Mon, 14 Aug 2023 14:20:13 GMT

Hi Lauren,

I'm not sure if the dashboard you are looking for is in here, but David Nyenhuis included this link as a reference for all dashboards he's presented at UC's and Dev Summits: https://links.esri.com/2023UCDashboardsSamples.

You can make copies of the dashboards and then go through any data expressions or formatting as you like and modify it too, as it is your copy. I've included David Nyenhuis here too, as he may have more information on the dashboard you referenced above.

@DavidNyenhuis1

Re: Arcade Code for Heat Chart

LaurenCammack01 — Mon, 14 Aug 2023 14:30:54 GMT

Amazing! Found exactly what I was looking for. Thank you for the help!

Re: Arcade Code for Heat Chart

LaurenCammack01 — Wed, 16 Aug 2023 12:58:20 GMT

I have run into my next problem with this heat chart. My end goal is to have a heat chart based on hour of day/day of week for calls for service. However, I have a filter on the date range so the color heat groups need to adjust as the data adjusts. I'm unable to figure out a way to gather all sum values and put in an array for me to get the max and min from the whole table. Below is where I'm at but I believe I need to somehow loop through the table using $rowindex.

Thank you in advance!

// gather all sum values from chart to find max, min, and create 5 color groups var myArray = [$datapoint.sum_Mon,$datapoint.sum_Tue,$datapoint.sum_Wed, $datapoint.sum_Thur, $datapoint.sum_Fri, $datapoint.sum_Sat, $datapoint.sum_Sun] var groupDiff = (Max(myArray)-Min(myArray))/5 var groupTwo = groupDiff * 2 var groupThree = groupDiff * 3 var groupFour = groupDiff * 4 function cellColor(callStatByDay){ return When(callStatByDay < groupDiff, '#eecb9a', callStatByDay >= groupDiff && callStatByDay < groupTwo, '#e7b48f', callStatByDay >= groupTwo && callStatByDay < groupThree, '#e09d85', callStatByDay >= groupThree && callStatByDay < groupFour, '#d9867a', '#c06677' ) } return { cells: { Hour: { displayText : $datapoint.Hour, textColor: '', backgroundColor: '', textAlign: 'left', iconName: '', iconAlign: '', iconColor: '', iconOutlineColor: '' }, sum_Mon: { displayText : $datapoint.sum_Mon, textColor: '', backgroundColor: cellColor($datapoint.sum_Mon), textAlign: 'center', iconName: '', iconAlign: '', iconColor: '', iconOutlineColor: '' }, sum_Tue: { displayText : $datapoint.sum_Tue, textColor: '', backgroundColor: cellColor($datapoint.sum_Tue), textAlign: 'center', iconName: '', iconAlign: '', iconColor: '', iconOutlineColor: '' }, sum_Wed: { displayText : $datapoint.sum_Wed, textColor: '', backgroundColor: cellColor($datapoint.sum_Wed), textAlign: 'center', iconName: '', iconAlign: '', iconColor: '', iconOutlineColor: '' }, sum_Thur: { displayText : $datapoint.sum_Thur, textColor: '', backgroundColor: cellColor($datapoint.sum_Thur), textAlign: 'center', iconName: '', iconAlign: '', iconColor: '', iconOutlineColor: '' }, sum_Fri: { displayText : $datapoint.sum_Fri, textColor: '', backgroundColor: cellColor($datapoint.sum_Fri), textAlign: 'center', iconName: '', iconAlign: '', iconColor: '', iconOutlineColor: '' }, sum_Sat: { displayText : $datapoint.sum_Sat, textColor: '', backgroundColor: cellColor($datapoint.sum_Sat), textAlign: 'center', iconName: '', iconAlign: '', iconColor: '', iconOutlineColor: '' }, sum_Sun: { displayText : $datapoint.sum_Sun, textColor: '', backgroundColor: cellColor($datapoint.sum_Sun), textAlign: 'center', iconName: '', iconAlign: '', iconColor: '', iconOutlineColor: '' } } }

@DavidNyenhuis1o

Re: Arcade Code for Heat Chart

BLeehan — Tue, 29 Apr 2025 13:01:49 GMT

Hi Lauren, this is exactly what I have been looking for! Did you ever find a solution in getting the heatmap colors to update with the dates?

topic Re: Arcade Code for Heat Chart in ArcGIS Dashboards Questions

Arcade Code for Heat Chart

Re: Arcade Code for Heat Chart

Re: Arcade Code for Heat Chart

Re: Arcade Code for Heat Chart

Re: Arcade Code for Heat Chart