Client-side statistics and ArcGIS Pie Chart

The sample loads a WebMap containing a FeatureLayer to a Map component. The layer shows the predominant education level achieved among residents aged 12 and older in each municipality of Mexico, using an Arcade expression in a UniqueValueRenderer. The web map also includes an ArcGIS pie chart that displays the total population in each education category within the map extent. The chart updates whenever the user pans or zooms the map.

How it works

After the map component is ready, the predominance feature layer is retrieved from the web map and its outFields are set to include the EDUCA_BASE field, allowing the layer’s FeatureLayerView to access the necessary attributes on the client-side.

1
2
3
4
// Get the layer from the webmap and set its outFields to EDUCA_BASE.
// We need this field on the client calculate total number of residents aged 12+
const predominanceLayer = findLayerByTitle("Educational Attainment by City");
predominanceLayer.outFields = ["EDUCA_BASE"];

The layer’s pie chart is configured directly in the HTML using the arcgis-chart component. This component is set up to display the total population in each education category for the current map extent. The chart automatically refreshes whenever the user pans or zooms, ensuring it always reflects the visible data. See the HTML snippet below for the configuration:

1
2
3
4
5
6
7
8
9
<arcgis-chart
  layer-item-id="5d9b6fddedba45d7b86a1e7dbb1bc278"
  chart-index="0"
  id="pie-chart"
  filter-by-extent
  disable-toggling-legend-items
  disable-interactions
  hide-loader-animation>
</arcgis-chart>

In the JavaScript code, the chart is connected to the map component by referencing the arcgis-chart element and setting its view property. This ensures that the chart updates automatically when the map extent changes:

1
2
3
4
// Get reference to the pie chart component and its model and set its view
const pieChartElement = document.getElementById("pie-chart");
pieChartElement.view = viewElement;
const pieChartModel = pieChartElement.model;

Next, the sample calculates the total number of residents aged 12 and older within the current extent. This query runs client-side whenever the layer view finishes fetching new features, for example, after the user pans or zooms the map. We handle this by watching the dataUpdating property of the layer view and triggering the query when it becomes false. See the code snippet below for the implementation:

1
2
3
4
5
6
// Wait until the layerView has finished fetching data for the current extent,
// then query sum statistics to get the total number of residents aged 12+
reactiveUtils.when(() => !layerView.dataUpdating,
  async () => {
    await queryLayerViewStats(layerView);
});

When the layer view completes fetching features, the queryLayerViewStats function is called. This function creates a StatisticDefinition to sum the values of the EDUCA_BASE field for all features within the map’s extent. It then calls the queryFeatures method on the layer view to execute the statistics query. In this sample, that sum represents the total number of people in each educational attainment category. The resulting value is then displayed as the chart’s title.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Called whenever layerView.dataUpdating becomes false
async function queryLayerViewStats(layerView) {
  const fieldName = "EDUCA_BASE";

  // Set stats definition to get the total number of residents aged 12+
  // in municipalities visible in the view extent
  const statDefinition = {
    onStatisticField: fieldName,
    outStatisticFieldName: fieldName + "_TOTAL",
    statisticType: "sum"
  };

  // Query statistics for features only in view extent
  const query = layerView.layer.createQuery();
  query.outStatistics = [statDefinition];
  query.geometry = viewElement.extent;

  const response = await layerView.queryFeatures(query);
  const totalCount = response.features?.[0]?.attributes?.EDUCA_BASE_TOTAL || 0;
  const title = numberWithCommas(totalCount) + " people (age 12+)";
  // Set the chart title to show total population aged 12+
  pieChartModel.titleText = title;
}