popup chart from related table

AJM

I am trying to make a line chart in the popup from a related table of inspections. The Arcade expression spits out data, but the chart does not work. 

 

Any idea how to get the chart to work? 

 

Thanks

AJ

 

Code 

 

// Get the related table
var table = FeatureSetByName($map, "Monitoring");

// Feature's matching ID (Name)
var myID = $feature["Name"];

// Array to hold features for chart
var features = [];

// Loop through table rows
for (var row in table) {
    // Only include rows matching the current feature
    if (row["CulvertID"] != myID) {
        continue;
    }

    var d = row["Date"];
    var h = row["AverageHeight"];

    // Skip invalid or empty data
    if (IsEmpty(d) || IsEmpty(h)) {
        continue;
    }

    // Push attributes as needed for chart
    Push(features, {
        attributes: {
            Date: d,
            AverageHeight: h
        }
    });
}

// Return data for popup chart
return {
    fields: [
        { name: "Date", type: "esriFieldTypeDate" },
        { name: "AverageHeight", type: "esriFieldTypeDouble" }
    ],
    geometryType: "",
    features: features
};

 

Results

dictionary
features: array(5)
0: dictionary
attributes: dictionary
AverageHeight: 34.25
Date: Mar 5, 2025, 8:47:34 AM Eastern Standard Time
1: dictionary
attributes: dictionary
AverageHeight: 34.83
Date: Mar 12, 2025, 1:39:34 PM Eastern Daylight Time
2: dictionary
attributes: dictionary
AverageHeight: 34.17
Date: Mar 19, 2025, 2:59:09 PM Eastern Daylight Time
3: dictionary
attributes: dictionary
AverageHeight: 0
Date: Mar 27, 2025, 2:15:07 PM Eastern Daylight Time
4: dictionary
attributes: dictionary
AverageHeight: 0
Date: Jun 18, 2025, 8:52:35 AM Eastern Daylight Time
fields: array(2)
0: dictionary
name: "Date"
type: "esriFieldTypeDate"
1: dictionary
name: "AverageHeight"
type: "esriFieldTypeDouble"
geometryType: ""

 

BlairMcclenathan

AJ,

 

Below is code I have used to pull from historic hydrant flow tests (in a related table) to display flow and pressure data as a bar chart.

 

 

 

       var MAX_TESTS   = 10;
    
    /* ───────────────────── 1. Fetch flow-test rows ───────────────────── */
    
    var PORTAL      = Portal("https://arcgis.yourportal.com/portal");
    var ITEM_ID     = "";
    var FLOW_LAYER  = ;                        // table-id for flow tests
    var FK_FIELD    = "FACILITYID";             // foreign-key in table 6
    var fields      = ["flowrate","residualpressure","staticpressure",
                       "testingdate", FK_FIELD];
    
    var flowTests   = FeatureSetByPortalItem(
                        PORTAL, ITEM_ID, FLOW_LAYER,
                        fields, false);
    
    /* WHERE FACILITYID = '<current hydrant’s FACILITYID>' */
    var facID = Trim(Text($feature[FK_FIELD]));
    if (IsEmpty(facID)) { return; } 
    var where = FK_FIELD + " = '" + facID + "'";
    var tests = Filter(flowTests, where);
    
    if (Count(tests) == 0) { return; }          // no matching tests
    
    /* ───────────────────── 2. Build per-metric lists ─────────────────── */
    
    var ordered   = OrderBy(tests, "testingdate DESC");   // newest → oldest
    var attrs     = {};
    var flowFlds  = [];
    var resFlds   = [];
    var staFlds   = [];
    
    var used      = {};
    var rowsAdded = 0;
    
    for (var rec in ordered) {
      if (rowsAdded == MAX_TESTS) { break; }
      if (IsEmpty(rec.testingdate)) { continue; }
    
      var base = Text(rec.testingdate, "YYYY-MM-DD");
      var lbl  = base;
      var dup  = 2;
      while (HasKey(used, lbl)) {
        lbl = base + " (" + dup + ")";
        dup += 1;
      }
      used[lbl] = true;
    
      if (!IsEmpty(rec.flowrate)) {
        var k = lbl + "_flow";
        attrs[k] = rec.flowrate;
        Push(flowFlds, k);
      }
      if (!IsEmpty(rec.residualpressure)) {
        var k = lbl + "_residual";
        attrs[k] = rec.residualpressure;
        Push(resFlds, k);
      }
      if (!IsEmpty(rec.staticpressure)) {
        var k = lbl + "_static";
        attrs[k] = rec.staticpressure;
        Push(staFlds, k);
      }
      rowsAdded += 1;
    }
    
    /* oldest → newest for chronological bars */
    flowFlds = Reverse(flowFlds);
    resFlds  = Reverse(resFlds);
    staFlds  = Reverse(staFlds);
    
    /* ─────────────── 3. Linear-regression trend caption ─────────────── */
    
    function captionLR(flds){
      var n = Count(flds);
      if (n < 2) { return " (trend unavailable)"; }
    
      var sumX  = 0;
      var sumY  = 0;
      var sumX2 = 0;
      var sumXY = 0;
    
      for (var i = 0; i < n; i++) {
        var y = attrs[flds[i]];
        if (IsEmpty(y)) { return " (trend unavailable)"; }
    
        sumX  += i;
        sumY  += y;
        sumX2 += i * i;
        sumXY += i * y;
      }
    
      var denom = n * sumX2 - sumX * sumX;
      if (denom == 0) { return " (trend unavailable)"; }
    
      var slope = (n * sumXY - sumX * sumY) / denom;   // Δy per test
      var arrow = IIf(slope > 0, "▲",
                  IIf(slope < 0, "▼", "►"));
      var txt   = Text(Abs(slope), "#,###.0");
    
      return arrow + " " + txt;
    }
    
    var flowCap = captionLR(flowFlds);
    var resCap  = captionLR(resFlds);
    var staCap  = captionLR(staFlds);
    
    /* ─────────────────── 4. Assemble the charts ─────────────────────── */
    
    var colors = [
      [48,67,77,255],[8,97,107,255],[0,118,132,255],[0,140,153,255],
      [96,124,151,255],[39,153,137,255],[115,140,167,255],[137,158,179,255],
      [161,178,196,255],[188,206,221,255]
    ];
    
    var charts = [];
    
    if (Count(flowFlds) > 0) {
      Push(charts,{
        type:'columnchart',
        title:'Flow Rate (GPM)',
        caption:flowCap,
        value:{fields:flowFlds,colors:colors}
      });
    }
    if (Count(resFlds) > 0) {
      Push(charts,{
        type:'columnchart',
        title:'Residual Pressure (PSI)',
        caption:resCap,
        value:{fields:resFlds,colors:colors}
      });
    }
    if (Count(staFlds) > 0) {
      Push(charts,{
        type:'columnchart',
        title:'Static Pressure (PSI)',
        caption:staCap,
        value:{fields:staFlds,colors:colors}
      });
    }
    
    if (Count(charts) == 0) { return; }
    
    /* ───────────────────── 5. Return Chart ──────────────────── */
    
    return {
      type      : 'media',
      attributes: attrs,
      mediaInfos: charts
    };