Select to view content in your preferred language

Arcade Code for Heat Chart

596
3
Jump to solution
08-14-2023 05:52 AM
LaurenCammack01
New Contributor III

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!

0 Kudos
1 Solution

Accepted Solutions
AmeWunderle
New Contributor III

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 

View solution in original post

0 Kudos
3 Replies
AmeWunderle
New Contributor III

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 

0 Kudos
LaurenCammack01
New Contributor III

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

0 Kudos
LaurenCammack01
New Contributor III

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: ''
    }
  }
}
LaurenCammack01_1-1692190235681.png
 

@DavidNyenhuis1o

Tags (1)
0 Kudos