Select to view content in your preferred language

Displaying statistics on querying by geometry

06-14-2024 03:36 AM
Occasional Contributor II

Hi Community,

I am very new to arcgis maps sdk for javascript library and have been working with samples to teach myself.

I have been referring to the following sample which allows users to draw a polygon, polyline or point geometry which is then used as the spatial geometry parameter in the query and displays statistics of the features that gets selected on drawing. 

I am trying to do something similar where the end user can draw a polygon and whatever number of features are inside that polygon, statistics of selected fields should be displayed as numbers (not charts). I have been able to reach a point where end users can draw a polygon and clear the drawings however, am not sure on how to get started with displaying statistics of various fields as shown in the sample. 



require(["esri/config", "esri/views/MapView", "esri/WebMap", "esri/layers/GraphicsLayer", "esri/widgets/Sketch/SketchViewModel", "esri/geometry/geometryEngine", "esri/core/promiseUtils"], function(esriConfig, MapView, WebMap, GraphicsLayer, SketchViewModel, geometryEngine, promiseUtils){
    esriConfig.apiKey = "**unspecified**"
    esriConfig.portalUrl = "**unspecified**"

// Loading Webmap
    const webmap = new WebMap({
        portalItem: {
            id: "274f8781b2634b0abc924a3d3f96df49"

// Defining View 

    const view = new MapView({
        map: webmap,
        center: [92.113523, 27.454524], // Longitude, latitude
        zoom: 10, // Zoom level
        container: "viewDiv"

//  Code to create & remove sketch layer as well as loading layer of webmap
    const sketchLayer = new GraphicsLayer()

    //let mapLayer = null;
    //let sceneLayerView = null;

    let sketchGeometry = null;
    const sketchViewModel = new SketchViewModel({
        layer: sketchLayer,
        view: view,
        polygonSymbol: {
            type: "simple-fill",
            color: "#F2BC94",
            outline: {
            color: "#722620",
            width: 3
    sketchViewModel.on(["create"], (event) => {
        if (event.state == "complete") {
          sketchGeometry = event.graphic.geometry;

    document.getElementById("polygon-geometry-button").onclick = geometryButtonsClickHandler;
    function geometryButtonsClickHandler(event) {
        const geometryType =;
    } = "block"
    view.ui.add([queryDiv], "bottom-left")
    view.ui.add([resultDiv], "top-right")

    sketchViewModel.on("create", (event) => {
        if (event.state === "complete") {
          sketchGeometry = event.graphic.geometry;

// Testing to run query
    const debouncedRunQuery = promiseUtils.debounce(() => {
        if (!sketchGeometry) {
    } = "block";
    return promiseUtils.eachAlways([queryStatistics(), updateMapLayer()]);

    function runQuery() {
        debouncedRunQuery().catch((error) => {
          if ( === "AbortError") {


// Code to display statistics of selected features.

// Code to clear the drawings
    document.getElementById("clearFilter").addEventListener("click", clearDrawings)

    function clearDrawings (){
        sketchGeometry = null;
        clearCharts(); = "none";






Any tips on how to get started would be really helpful.

The fields that am trying to query are a numeric field.



0 Kudos
1 Reply
Esri Regular Contributor

The sample shows how to do the stats query, namely the queryStatistics function.

0 Kudos