Arcade Code for Heat Chart

[LaurenCammack01]

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!

[AmeWunderle · Accepted solution]

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 

[LaurenCammack01]

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

[LaurenCammack01]

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