Need help creating a pop-up chart pulling data from related table

[BNRiverkeeper]

Please help, I've been trying for hours as someone with minimal arcade experience. Here is the code I have: 

// Access related table

var portal = Portal("https://www.arcgis.com")

var relatedTable = FeatureSetByPortalItem(portal,

    "558cb226d1cd403c9e9bfc5dacd8ea67", 1, ['station_id', 'record_date', 'E__coli'])

var station_id = Text($feature.station_id)

var relatedData = Filter(relatedTable, "station_id = @station_id")

// If no related records exist, return null

if (Count(relatedData) == 0) {

    return null

}

// Sort records by date (ascending)

var sortedData = OrderBy(relatedData, 'record_date ASC')

// Prepare lists for charting

var dates = []

var ecoliValues = []

for (var f in sortedData) {

    // Convert date and E. coli values to the correct format

    var formattedDate = Text(Date(f.record_date), 'MM/DD/YYYY')

    var ecoliValue = Number(f.E__coli)

    if (!IsEmpty(formattedDate) && !IsEmpty(ecoliValue)) {

        Push(dates, formattedDate)

        Push(ecoliValues, ecoliValue)

    }

}

// Return correctly formatted data for ArcGIS Online Charts

return {

    "labels": dates,  // X-axis (dates)

    "datasets": [

        {

            "label": "E. Coli Levels",

            "data": ecoliValues  // Y-axis (E. coli values)

        }

    ]

}

I just need the chart to show E coli counts on the Y, and date on the X. The data is pulling correctly when populating the field, and it shows all related records in the pop-up table. As the code is now, the chart populates blank.

[timcneil]

Hi @BNRiverkeeper ,

Are you authoring this arcade expression as an attribute expression? 

In this scenario it seems like you could benefit from using an Arcade content element in your pop-up. With a content element you can construct the whole chart and return it in your pop-up in a single expression.

These blogs are a great introduction (with some examples as well). I would start with Part 1 here for context, but Part 2 provides an example using a chart that at a glance seems very similar to your use case. 

[KenBuja]

This shows the chart with your values using an Arcade element

// Access related table
var portal = Portal("https://www.arcgis.com")
var relatedTable = FeatureSetByPortalItem(portal,
    "558cb226d1cd403c9e9bfc5dacd8ea67", 1, ['station_id', 'record_date', 'E__coli'])

var station_id = Text($feature.station_id)
var relatedData = Filter(relatedTable, "station_id = @station_id")

// If no related records exist, return null
if (Count(relatedData) == 0) {
    return null
}

// Sort records by date (ascending)
var sortedData = OrderBy(relatedData, 'record_date ASC')

// Prepare lists for charting
var dates = []
var ecoliValues = {}
//var chartColors = []  //use this to have a monocolor chart

for (var f in sortedData) {
    // Convert date and E. coli values to the correct format
    var formattedDate = Text(Date(f.record_date), 'MM/DD/YYYY')
    var ecoliValue = Number(f.E__coli)

    if (!IsEmpty(formattedDate) && !IsEmpty(ecoliValue)) {
        Push(dates, formattedDate)
        //Push(ecoliValues, ecoliValue)
        ecoliValues[formattedDate] = ecoliValue
//        Push(chartColors, [6,47,120])
    }
}

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