nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

ArcGIS JavaScript Components - Update chart when selecting a feature.

dgreenin

Good Morning,

I am currently working with ArcGIS JavaScript Components (beta).

The current documentation shows how to highlight map features based on selections made within a chart component (ie. pie chart).

However, I would like to update the chart component (ie. pie chart) based on the selection of a feature within a feature layer on the map.

'Example: Feature layer contains county boundary polygons for a state and associated demographics for each county. Current pie chart shows demographics for entire feature layer (ie. state). Desired outcome would be to select an individuial county and update the pie chart to reflect demographics of that county only.'

There are currently no tutorials on how to do this. Is this possible using the current Components API (beta)?

Trouver plus de publications taguées avec

Accepted answers

HaoyanChen

Hi dgreenin,

I have modified the provided code below, please take a look and read thru the comments and let me know if this helped to achieve your initial goal.

In the modified code, we first check if `layerCount.length > 0`. If it is, we proceed as before. If it's not (meaning we clicked on an empty part of the map), we clear the definition query by setting `layer.definitionExpression` to an empty string.

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map using arcgis/map-components</title>

    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #pie-chart {
            position: absolute;
            bottom: 30px;
            left: 30px;
            height: 40%;
            width: 50%;
        }
    </style>

    <!-- Load Map Components from CDN-->
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/light/main.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.5.1/calcite.css" />

    <script src="https://js.arcgis.com/4.29/"></script>
    <script type="module" src="https://js.arcgis.com/calcite-components/2.5.1/calcite.esm.js"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></script>
    <script type="module" src="https://js.arcgis.com/charts-components/4.29/arcgis-charts-components.esm.js"></script>

</head>

<body>

    <arcgis-map item-id="9a043ed7a9ae42658459e4a5df9427e5"></arcgis-map>
    <arcgis-charts-pie-chart id="pie-chart">
        <arcgis-charts-action-bar slot="action-bar" disable-filter-by-selection="false"></arcgis-charts-action-bar>
    </arcgis-charts-pie-chart>

    <script type="module">

        const map = document.querySelector("arcgis-map");


        map.addEventListener("arcgisViewReadyChange", (event) => {
            const { map, view } = event.target;
            const layer = map.layers.find((layer) => layer.title === 'USA Census States');

            view.on("click", (event) => {
                queryFeatures(event);
            });

            function queryFeatures(event) {

                const layerQuery = {
                    geometry: event.mapPoint,
                    spatialRelationship: "intersects",
                    returnGeometry: true,
                    outFields: ["STATE_ABBR"]
                };

                layer.queryFeatures(layerQuery)
                    .then((results) => {
                        const layerCount = results.features;
                        if (layerCount.length > 0) {
                            layerCount.forEach((result) => {
                                const attributes = result.attributes;
                                const state = `${attributes.STATE_ABBR}`;
                                if (state.length > 0) {
                                    layer.definitionExpression = `STATE_ABBR = '${state}'`;
                                }
                            });
                        } else {
                            // Clear definition query
                            layer.definitionExpression = '';
                        }

                    }).catch((error) => {
                        console.log(error);
                    });
            };
            const pieChartElement = document.getElementById("pie-chart");
            const pieChartConfig = layer.charts[1];

            pieChartElement.config = pieChartConfig;
            pieChartElement.layer = layer;
        });

    </script>

</body>

</html>

All comments

dgreenin

@HaoyanChen,

That works perfectly! Thank you!

HaoyanChen

Hi dgreenin,

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map using arcgis/map-components</title>

    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #pie-chart {
            position: absolute;
            bottom: 30px;
            left: 30px;
            height: 40%;
            width: 50%;
        }
    </style>

    <!-- Load Map Components from CDN-->
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/light/main.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.5.1/calcite.css" />

    <script src="https://js.arcgis.com/4.29/"></script>
    <script type="module" src="https://js.arcgis.com/calcite-components/2.5.1/calcite.esm.js"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></script>
    <script type="module" src="https://js.arcgis.com/charts-components/4.29/arcgis-charts-components.esm.js"></script>

</head>

<body>

    <arcgis-map item-id="9a043ed7a9ae42658459e4a5df9427e5"></arcgis-map>
    <arcgis-charts-pie-chart id="pie-chart">
        <arcgis-charts-action-bar slot="action-bar" disable-filter-by-selection="false"></arcgis-charts-action-bar>
    </arcgis-charts-pie-chart>

    <script type="module">

        const map = document.querySelector("arcgis-map");


        map.addEventListener("arcgisViewReadyChange", (event) => {
            const { map, view } = event.target;
            const layer = map.layers.find((layer) => layer.title === 'USA Census States');

            view.on("click", (event) => {
                queryFeatures(event);
            });

            function queryFeatures(event) {

                const layerQuery = {
                    geometry: event.mapPoint,
                    spatialRelationship: "intersects",
                    returnGeometry: true,
                    outFields: ["STATE_ABBR"]
                };

                layer.queryFeatures(layerQuery)
                    .then((results) => {
                        const layerCount = results.features;
                        if (layerCount.length > 0) {
                            layerCount.forEach((result) => {
                                const attributes = result.attributes;
                                const state = `${attributes.STATE_ABBR}`;
                                if (state.length > 0) {
                                    layer.definitionExpression = `STATE_ABBR = '${state}'`;
                                }
                            });
                        } else {
                            // Clear definition query
                            layer.definitionExpression = '';
                        }

                    }).catch((error) => {
                        console.log(error);
                    });
            };
            const pieChartElement = document.getElementById("pie-chart");
            const pieChartConfig = layer.charts[1];

            pieChartElement.config = pieChartConfig;
            pieChartElement.layer = layer;
        });

    </script>

</body>

</html>

dgreenin

Good Afternoon HaoyanChen,

I have continued testing to achieve the intial functionality I was in pursuit of.

Here is a detailed description of the problem/solution:

When initially configuring the format of pie charts within a web map, there are two choices for creating slices, 'Category' and 'Fields'.

'Category' represents one field from a layer with each slice representing different unique value within the field.
'Numeric' represents one or more numeric fields in a layer with each slice displaying the sum total of each individual numeric field.

The effort then becomes, how do you represent the 'Numeric' slices for a single feature within a layer rather than the sum of features for the entire layer.

Through intitial testing, the selection functionality we have worked on didn't quite achieve this functionality.

My current solution is to introduce a definition query tied to the selection of an individual feature.

I have utilized your coding sample as a base for showing this functionality. I could use some assistance on clearing the definition query when selecting blank portion of the map.

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map using arcgis/map-components</title>

    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #pie-chart {
            position: absolute;
            bottom: 30px;
            left: 30px;
            height: 40%;
            width: 50%;
        }
    </style>

    <!-- Load Map Components from CDN-->
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/@arcgis/core/assets/esri/themes/light/main.css">
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.5.1/calcite.css" />

    <script src="https://js.arcgis.com/4.29/"></script>
    <script type="module" src="https://js.arcgis.com/calcite-components/2.5.1/calcite.esm.js"></script>
    <script type="module" src="https://js.arcgis.com/map-components/4.29/arcgis-map-components.esm.js"></script>
    <script type="module" src="https://js.arcgis.com/charts-components/4.29/arcgis-charts-components.esm.js"></script>

</head>

<body>

    <arcgis-map item-id="9a043ed7a9ae42658459e4a5df9427e5"></arcgis-map>
    <arcgis-charts-pie-chart id="pie-chart">
        <arcgis-charts-action-bar slot="action-bar" disable-filter-by-selection="false"></arcgis-charts-action-bar>
    </arcgis-charts-pie-chart>

    <script type="module">

        const map = document.querySelector("arcgis-map");


        map.addEventListener("arcgisViewReadyChange", (event) => {
            const { map, view } = event.target;
            const layer = map.layers.find((layer) => layer.title === 'USA Census States');

            view.on("click", (event) => {
                queryFeatures(event);
            });

            function queryFeatures(event) {

                const layerQuery = {
                    geometry: event.mapPoint,
                    // distance and units will be null if basic query selected
                    spatialRelationship: "intersects",
                    returnGeometry: true,
                    outFields: ["STATE_ABBR"]
                };
                
                layer.queryFeatures(layerQuery)
                .then((results) => {

                const layerCount = results.features;
                layerCount.forEach((result) => {
                    const attributes = result.attributes;
                    const state = `${attributes.STATE_ABBR}`;
                    if (state.length > 0) {
                    layer.definitionExpression = `STATE_ABBR = '${state}'`;
                    } else {
                    // Insert code to clear definition query
                    }
                })
                
                }).catch((error) => {
                    console.log(error);
                });
            };
            const pieChartElement = document.getElementById("pie-chart");
            const pieChartConfig = layer.charts[1];
    
            pieChartElement.config = pieChartConfig;
            pieChartElement.layer = layer;
        });

    </script>

</body>

</html>

HaoyanChen

Hi dgreenin,

This might be caused by the specific layer that is being used. I tested with the same data from the CodePen with a pie chart and the "Filter by selection" is working as expected.

Pie chart selection: https://codepen.io/jchenAtlas/pen/poBOgGE

Please send me a direct message and we can dig deeper if it's a layer specific issue or maybe a field specific issue.

dgreenin

HaoyanChen,

This works great for a bar-chart and scatter-plot! Thank you for providing the sample code in codepen. It is very helfpul to see the code compiled in one place (Sample code referenced below).

HaoyanChen Sample Code - 'Sync up selection with Map and Chart':

https://codepen.io/jchenAtlas/pen/poBOgGE

Currently, this sample code does not work for a pie-chart. The 'Filter by selection' option, when selected in the action-bar for a pie-chart, will result in an error as previously posted (Screenshot attached for reference).

The following sample code 'Query statistics client-side' represents the functionality I am pursuing. The intent would be to use 'query by selection' (as we have been working on) in place of 'query by extent' to update a pie-chart.

ArcGIS JavaScript Sample Code - 'Query statistics client-side':

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=featurelayerview-query-stats

ArcGIS_JavaScript_Components_Error_20240416.png

HaoyanChen

Hi dgreenin,

I have put together a CodePen with the working scenario: https://codepen.io/jchenAtlas/pen/poBOgGE.

I changed a couple of things to follow some patterns for Map Components (using the "arcgisViewClick" event listener instead of the view onClick).

Feel free to replace the layer ID and name on lines 40 and 59, and let me know if this sample works with your own layer as well.

dgreenin

I am currently encountering an error when selecting 'Filter by selection' in the action bar (see the attached screenshot).

Through the use of 'console.log' I see that the objectid is returned correctly when the feature is selected.

const selectedFeatureOID = response.results[0].graphic.attributes['OBJECTID'];
console.log(selectedFeatureOID)

However, it appears as though the following line of code is not registering correctly.

scatterplotElement.selectionData = { selectionOIDs: [selectedFeatureOID] };

ArcGIS_JavaScript_Components_Error_20240416.png

HaoyanChen

You can manually set the 'disable-filter-by-selection' to false in your action bar.

Your HTML would look like this:

<arcgis-charts-scatter-plot id="scatterplot">
  <arcgis-charts-action-bar slot="action-bar" disable-filter-by-selection="false"></arcgis-charts-action-bar>
</arcgis-charts-scatter-plot>

To further customize the actions/controls of the action-bar component, you can adjust the properties to suit the needs of your application (enabling/disabling certain actions): https://developers.arcgis.com/javascript/latest/components/storybook/?path=/docs/charts-components_component-reference-action-bar--docs

dgreenin

Thank you again for the fast reply!

I have attempted to utilize the provided code sample (compiled) without success. While selecting a feature within the referenced map component, the "Filter By Selection" option does not light up (is not selectable) within the associated chart's "Action Bar".

document.querySelector('arcgis-map').addEventListener('arcgisViewReadyChange', (event) => {
  
  const { map, view } = event.target;
     
  view.on('click', function (event) {
    var screenPoint = event.screenPoint;

    view.hitTest(screenPoint).then(getFeatures);
  });

  function getFeatures(response) {
    // get the selected feature's ObjectId from the hitTest
    const selectedFeatureOID = response.results[0].graphic.attributes['ObjectId'];
    
    // set the selected feature's OID to the Charts component's selectionData
    scatterplotElement.selectionData = { selectionOIDs: [selectedFeatureOID] };
  }

// Use the action bar to filter by selection...
});

For reference, my current web application setup (map, layer & chart) is based on the following ArcGIS Maps SDK for JavaScript Components (beta) Tutorial.

Tutorial: 'Charts components with Map components'

Tutorial URL: https://developers.arcgis.com/javascript/latest/tutorials/charts-components-with-map-components/

*Refer to the sections 'Add styles', 'Add components' and 'Load the feature layer item'.

HaoyanChen

You are correct! You can grab the view from the event.target of the <arcgis-map> component. With the 'arcgisViewReadyChange' event listener added, the view will be ready to use by the time you define your click function.

document.querySelector('arcgis-map').addEventListener('arcgisViewReadyChange', (event) => {
  
  const { map, view } = event.target;
     
  // use the view.on('click') here...
});

dgreenin

Thank you for your reply! That is very helpful.

I have been running into issues while attempting to utilize the proof a concept provided. Is it possible to utilize the " view.on('click " while referencing an <arcgis-map> component?

view.on('click', function (event) {
      var screenPoint = event.screenPoint;

      view.hitTest(screenPoint).then(getFeatures);
    });

Are <arcgis-map> component 'events' required instead? The following code sample provides a reference to what I am describing. However, the code sample does not work in it's current form.

const map = document.querySelector("arcgis-map");

map.addEventListener("arcgisViewClick", (event) => {
  const { view } = event.target;
  var screenPoint = event.screenPoint;
  view.hitTest(screenPoint).then(getFeatures);
});

function getFeatures(response) {
  // get the selected feature's ObjectId from the hitTest
  const selectedFeatureOID = response.results[0].graphic.attributes['ObjectId'];
  // set the selected feature's OID to the Charts component's selectionData
  pieChartElement.selectionData = { selectionOIDs: [selectedFeatureOID] };
};

HaoyanChen

Hi dgreenin, thank you for reaching out about this.

Currently, you can make a selection on the feature layer view and pass those selected features into the chart component.

This will not generate a new chart, but it will highlight the selected features. From there, you can use the <arcgis-charts-action-bar> component's built-in 'Filter by selection' feature to help you narrow down your chart's visualization.

Here's a quick proof of concept for this.

view.on('click', function (event) {
      var screenPoint = event.screenPoint;

      view.hitTest(screenPoint).then(getFeatures);
    });

    function getFeatures(response) {
      // get the selected feature's ObjectId from the hitTest
      const selectedFeatureOID = response.results[0].graphic.attributes['ObjectId'];
      
      // set the selected feature's OID to the Charts component's selectionData
      scatterplotElement.selectionData = { selectionOIDs: [selectedFeatureOID] };
    }

// Use the action bar to filter by selection...

We will work on including this workflow in the tutorial, as it's an important way for users to visualize the data between the map and the chart.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.