Arcade pop-up chart element fails to render

Question

Hi, I recently wrote three Arcade expressions to display two line charts and one pie chart in a pop-up. The expressions were working fine and pop-ups were behaving as normal. I created both an instant app and an arcgis experience using the web map so I could dock the pop-up. These apps were then embedded in an ArcGIS Story Map slide. As of yesterday, everything was working as expected: Pop-ups rendered all three charts within the web map, instant app, and experience Feature Info widget; Apps rendered the pop-ups as expected in the Story Map... I made no changes to the code since it took me forever to write it. Anyway, today only the pie chart is rendering in the experience app and instant app. The Arcade expressions are essentially the same (except for pie vs line) but use different sql. Today the charts fail to render anywhere except for where I feature the Web Map directly into the Story Map (i.e., not via an application).

Here is my code:

function countryFMT(c) {
if (c == "Bosnia and Herzegovina") {
  return "Bosnia Herzegovina"
  } else {
  if (c=="Republic of Macedonia") {
  return "North Macedonia" 
  } else {
  return c
  }
  }
  }
var country = countryFMT($feature.NAME_EN)
var table = FeatureSetByName($map, "EMBER yearly full release long format", ["Area", "Year","Variable","Value", "Unit"])
var sql = "Area = '" + country +"'" + "AND Variable = 'Total emissions'"
var related_records = Filter(table, sql)

var chartValues = {};
var chartNames = [];

for (var f in related_records) {
  chartValues[Text(f.Year,'0000')] = Text(f.Value,'##.#')
  Push(chartNames, f.Year)
}

return {
    type: 'media',
    title : 'Annual megatons CO2 Emissions 2000-2022',
    //description : 'Total emissions of CO2 in megatons for ' + country + ' from 2000-2022',
    attributes : chartValues,  // replace this dictionary with your own key-value pairs,
    mediaInfos: [{
        type : 'linechart', //linechart | barchart | piechart | columnchart
        //title : '',
        //caption : '',
        altText : 'line chart showing CO2 emissions in megatons by year', //altText will be read by screen readers
        value : {
          fields: chartNames,  // choose what attributes to use in the chart
          //normalizeField : '',  // the name of the attribute to normalize by or value 
        }	  
      }]
  }

Here's a screenshot of how one of the charts render in story map and how it fails to render even in the webmap! Note, for some reason the pie chart uses different colors now. Totally at a loss.

StoryMap view:

WebMap View:

Experience view:

LaurenBoyd · Answer

Hi @bsklaohfl -

You are correct - the reasoning this was occurring is because the chart values need to be returned as a number and not text. This should have been enforced previously but we were bring more lenient about it in previous releases. Glad you were able to get this working and your code looks correct!

bsklaohfl · Answer

I figured it out! I think this may have to do with the June update which asks for numerical values when configuring a chart, but I'm not totally sure. I adjusted line 7 to call a numerical value, and the chart works! I hope this helps someone.

for (var f in AADT) {

chartValues[Text(f.Year,'0000')] = Number(f.Mean_ADT,'###,###')

bsklaohfl · Answer

Hi Lauren,

I am having a similar issue as I have not touched my script, but it is no longer functioning. Is there documentation on the changes for the release?

var Road = $feature.MRNLINKID
var Table = FeatureSetByName($map, "ADT_Data_Merge", ['Mean_ADT', 'Year', 'StationID'], false)
var AADT = OrderBy(Filter(Table, 'StationID = @Road'), 'Year')
var chartValues = {}
var chartNames = []
for (var f in AADT) {
        chartValues[Text(f.Year,'0000')] = Text(f.Mean_ADT,'###,###')
        Push(chartNames, f.Year)
    }
return {
    type: 'media',
    title : 'AADT by Year',
    description : 'Annual average daily traffic by year for this road',
    attributes : chartValues,  // replace this dictionary with your own key-value pairs,
    mediaInfos: [{
        type : 'linechart', //linechart | barchart | piechart | columnchart
        //title : '',
        //caption : '',
        altText : 'line chart showing traffic counts by year', //altText will be read by screen readers
        value : {
          fields: chartNames,  // choose what attributes to use in the chart
          //normalizeField : '',  // the name of the attribute to normalize by or value 
        }   
      }]
  }

Would you mind taking a look at my script and letting me know what I need to change to get it functioning again?

Thanks,

Brooke