Execute Arcade for a custom chart

Explore in the sandboxView live

This sample demonstrates how to execute an Arcade expression outside the rendering context of a webmap layer to create a scatter plot chart. Arcade expressions are executed in the context of a profile, which defines where an expression executes, which variables it can use, and what data types it can return. For example, the visualization Arcade profile is defined by the following rules:

  • Execution context: Expressions may only execute in the valueExpression property of a renderer, visual variable, or CIMSymbol primitive override.
  • Profile variables:
    • $feature - The feature for which to calculate a value. Expressions have access to its geometry and attributes.
    • $view.scale - The view scale, for scale-dependent visualizations.
  • Valid return types: number or text, depending on the context.

This example loads a webmap that defines a renderer based on an Arcade expression that calculates the diversity of languages spoken in the home. The layer provides the total population that speak a language in each of five different language groups in the United States. The following is an expression referenced by a color visual variable, which colors each symbol along a continuous color ramp based on each feature's result of the expression.

This expression isn't present in the sample app, but it is stored in the webmap.

Use dark colors for code blocksCopy
                         
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var asian = $feature["B16007_calc_numAPIE"];
var english = $feature["B16007_calc_numEngOnlyE"];
var european = $feature["B16007_calc_numIEE"];
var other = $feature["B16007_calc_numOtherE"];
var spanish = $feature["B16007_calc_numSpanE"];

var groups = [asian,english,european,other,spanish];

// Returns a value 0-100.
// Indicates the % chance two people
// who speak different languages are
// randomly selected from the area.
function simpsonsDiversityIndex(vals){
  var k = Array(Count(vals));
  var t = sum(vals);
  for(var i in vals){
    var n = vals[i];
    k[i] = n * (n-1);
  }
  var s = Sum(k);
  var di = 1 - ( s  / ( t * (t-1) ) );
  return Round(di*100);
}

simpsonsDiversityIndex(groups)

This expression executes for each feature within the rendering engine, and the values are not available to the developer or end user for any other purpose. However, you can use the createArcadeExecutor method in the esri/arcade module to execute expressions stored in webmaps (or used in any other part of your application) outside its original context for some other purpose. This sample shows how to do this for creating a chart based on the results of the expression above.

First, get the Arcade expression from the color variable in the layer's renderer.

Use dark colors for code blocksCopy
           
1
2
3
4
5
6
7
8
9
10
11
// Get layer containing Arcade expression from webmap
const spanishSpeakersLayer = view.map.layers.find(
  layer => layer.title === "Language diversity in Spanish speaking populations"
);

// Get visual variable containing the Arcade expression
const renderer = spanishSpeakersLayer.renderer;
const colorVariable = renderer.visualVariables.find( vv => vv.type === "color");

// Arcade expression used by color visual variable
const diversityArcadeScript = colorVariable.valueExpression;

Then, define the profile used to execute the expression. This specifies the variables used and their associated Arcade types.

Use dark colors for code blocksCopy
                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Define the visualization profile variables
// Spec documented here:
// https://developers.arcgis.com/arcade/guide/profiles/#visualization
const visualizationProfile = {
  variables: [{
    name: "$feature",
    type: "feature"
  }, {
    name: "$view",
    type: "dictionary",
    properties: [{
      name: "scale",
      type: "number"
    }]
  }]
};

Create the executor, which compiles the expression for the given profile.

Use dark colors for code blocksCopy
            
1
2
3
4
5
6
7
8
9
10
11
12
// Compile the Arcade expression and create an executor
const diversityArcadeExecutor =
  await arcade.createArcadeExecutor(diversityArcadeScript, visualizationProfile);

// Ensure the input to $feature has all the
// data required by the expression.
// The additional field listed below is required by the y axis of
// the chart, but not used in the Arcade expression.
spanishSpeakersLayer.outFields = [
  ...diversityArcadeExecutor.fieldsUsed,
  "B16007_calc_pctSpanE"
];

Once successfully compiled, execute the expression for each feature in the layer view. Once you have the results, you can build a chart or display the values in a table or some other component.

Use dark colors for code blocksCopy
                          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const spanishSpeakersLayerView = await view.whenLayerView(spanishSpeakersLayer);
const { features } = await spanishSpeakersLayerView.queryFeatures();

const chartPoints = features.map( async (feature) => {

  // Execute the Arcade expression for each feature in the layer view
  const diversityIndex = await diversityArcadeExecutor.executeAsync({
    "$feature": feature,
    "$view": view
  });

  const backgroundColor = await symbolUtils.getDisplayedColor(feature);

  // Return the chart data along with the color used to represent
  // the diversity index value in the color variable
  return {
    data: {
      x: diversityIndex,
      y: feature.attributes.B16007_calc_pctSpanE
    },
    backgroundColor
  }
});

// Use a Chart API to build a chart from the Arcade results
const chartData = await Promise.all(chartPoints);
Image preview of related sample Reference Arcade expressions in PopupTemplate

Reference Arcade expressions in PopupTemplate

Reference Arcade expressions in PopupTemplate

Image preview of related sample Summarize intersecting points in a popup

Summarize intersecting points in a popup

Summarize intersecting points in a popup

Image preview of related sample Update a renderer's attribute

Update a renderer's attribute

Update a renderer's attribute's attribute

Image preview of related sample Create a custom visualization using Arcade

Create a custom visualization using Arcade

Create a custom visualization using Arcade

API Reference

Read the API Reference for more information.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.