nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

Find more posts tagged with

Accepted answers

wunderlea

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

All comments

BLeehan

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?

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

LaurenCammack01

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

wunderlea

Hi Lauren,

@DavidNyenhuis1

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.