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)?

[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.

[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]

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 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 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_c...

[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] }; 

[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]

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-s...

[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.