Create chart in pop-up using arcade with dictionary key:value pairs

[BradSkopyk]

I am trying to create a column chart in a pop-up using an Arcade content element, but the result is a blank chart.

I have succeeded elsewhere with other Arcade pop-up charts, but in those cases I had used a featureset as the data set.

Now, in this (unsuccessful) case, I am using a data dictionary of key:value pairs in which keys should be 30 decades between 1520 and 1810 and values are an aggregated count of ecological crises experienced at the particular location.

The resulting data dictionary ("decades_dict" in arcade script below) looks good:

{"1520":0,"1530":0,"1540":0,"1550":0,"1560":0,"1570":2,"1580":1,"1590":0,"1600":0,"1610":1,"1620":3,"1630":4,"1640":3,"1650":0,"1660":2,"1670":0,"1680":0,"1690":6,"1700":0,"1710":0,"1720":0,"1730":0,"1740":0,"1750":0,"1760":0,"1770":0,"1780":0,"1790":0,"1800":0,"1810":0}

The resulting chartNames array, however, does not look right. It is not grabbing the keys from the dictionary but only the values. Thus it looks like this:

["0","0","0","0","0","2","1","0","0","1","3","4","3","0","2","0","0","6","0","0","0","0","0","0","0","0","0","0","0","0"]

So, I need help making the chart render properly AND to make sure that "chartNames" has an array of decades  (i.e. the keys of the dictionary, not its values) which are represented as strings.

//Make serial 'dummy' dictionary of decades between 1520 and 1810 with values = 0
var decades_dict = {};
for (var i = 1520; i <= 1810; i+=10) {
  decades_dict["" + i] = 0;
}

//Create featureset of location-specific aggregations of events per decade
//NB: Not all decades have values, hence the need for the serial dummy dictionary above
var curr_lid = $feature.lid
var feature_events = Filter($layer, "lid = @curr_lid")
var dec_counts = GroupBy(feature_events, "decade", {name:"dec_cnt", expression: "decade", statistic: "count"})

//Overwrite some dummy decades with new values in location-specific decade counts
for (var i in dec_counts) {
  var deckey = Text(i.decade)
	var new_val = i.dec_cnt
	decades_dict[deckey] = new_val
  }

//Create empty arrays for chartnames and chart colors 
var chartNames = []
var chartColors = []

for (var n in decades_dict) {
  //Make chart monochromatic
  Push(chartColors, [6,47,120])
  var allkeys = Text(decades_dict[n])
  //I don't know how to pass the dictionary 'key' to an array for chartNames
  //If I do it like line 31 below, my chart is empty. 
  //So PLEASE HELP because the following does not work
  Push(chartNames,allkeys)
}

return {
    type: 'media',
    title : 'Events per Decade',
    description : 'Chart showing total events per decade',
    attributes : decades_dict,
    mediaInfos: [{
        type : 'columnchart', //linechart | barchart | piechart | columnchart
        altText : 'bar chart showing events per decade', //altText will be read by screen readers
        value : {
          fields: chartNames,
          colors: chartColors
        }	  
      }]
  }

[KenBuja · Accepted solution]

When you loop through the dictionary in line 24, the variable n is the key name. You just need to modify your loop like this

for (var n in decades_dict) {
  //Make chart monochromatic
  Push(chartColors, [6,47,120])
  Push(chartNames, n)
}

[BradSkopyk]

So simple! Thank you!

[KenBuja]

You can simplify your code even further, getting rid of that loop and utilizing the loop in line 3 to populate the chartNames and chartColors arrays.