RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/tutorials/charts-components-with-map-components/ below:

Charts components with Map components | Overview | ArcGIS Maps SDK for JavaScript 4.33

Learn how to use Charts Components with Map Components using Vite developer build tools.

In this tutorial, you will:

Add a map with an arcgis-map component and create a chart with an arcgis-chart component.
Add an arcgis-charts-action-bar component that will allow more interaction actions with the chart.
Explore interactive functionalities, such as filtering by extent of the map and synchronizing selections between the chart and the map.

Note

For help with this tutorial, please post on the Esri community site.

Prerequisites

The most recent LTS Node.js runtime environment.
A text editor to edit files.
A terminal to enter commands.

Steps Create a new project using Vite

Download the initial Vite vanilla JavaScript project to your local machine.
Unzip the downloaded file.
Open the unzipped folder's files in your text editor.
Navigate to the unzipped folder in your terminal.

Install dependencies

Install Charts Components and Map Components in the terminal as dependencies.
Note
You need to install @arcgis/core and @esri/calcite-components manually, as they are listed as peer dependencies of @arcgis/map-components.

Use dark colors for code blocks Copy
```
1
npm install @arcgis/charts-components @arcgis/map-components
```
Start the Vite development server.

Use dark colors for code blocks Copy
Open a web browser and navigate to http://localhost:5173, this webpage will be empty, however, it will update as we proceed through the remaining steps.
Import the <arcgis-map> component and the <arcgis-placement> component from the @arcgis/map-components package in main.js.

Use dark colors for code blocks Copy
```
1
2
import "@arcgis/map-components/components/arcgis-map";
import "@arcgis/map-components/components/arcgis-placement";
```
Import the <arcgis-chart> component and the <arcgis-charts-action-bar> component from the @arcgis/charts-components package in main.js.

Use dark colors for code blocks Copy
```
1
2
import "@arcgis/charts-components/components/arcgis-chart";
import "@arcgis/charts-components/components/arcgis-charts-action-bar";
```

Add styles

In style.css, import the @arcgis/core light theme CSS stylesheet.

Use dark colors for code blocks Copy
```
1
@import "https://js.arcgis.com/4.33/@arcgis/core/assets/esri/themes/light/main.css";
```
Add CSS styles to make the html, body and arcgis-map elements the full height of their parent containers.

Use dark colors for code blocks Copy
```
1
2
3
4
5
6
html,
body,
arcgis-map {
   height: 100%;
   margin: 0;
}
```
Add CSS styles to the arcgis-chart element.

Use dark colors for code blocks Copy
```
1
2
3
4
arcgis-chart {
   height: 100%;
   width: 200%;
}
```
Import the CSS file in main.js.

Use dark colors for code blocks Copy

Add components

Add the <arcgis-map> component to index.html under <body>.

Use dark colors for code blocks Copy
```
1
<arcgis-map item-id="f2481ef191924872be8897179f73d55c"></arcgis-map>
```

Add the <arcgis-placement> component inside the <arcgis-map> component to position the chart on the map.

Use dark colors for code blocks Copy

1
2
3
4
<arcgis-map item-id="f2481ef191924872be8897179f73d55c">
  <arcgis-placement position="bottom-left">
  </arcgis-placement>
</arcgis-map>

Add the <arcgis-chart> component under the placement component, and slot the <arcgis-charts-action-bar> component into it using slot="action-bar" to enable chart actions like filtering and exporting.

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
<arcgis-map item-id="f2481ef191924872be8897179f73d55c">
   <arcgis-placement position="bottom-left">
     <arcgis-chart>
       <arcgis-charts-action-bar slot="action-bar"></arcgis-charts-action-bar>
     </arcgis-chart>
   </arcgis-placement>
 </arcgis-map>

Create a reference to components

In main.js, use document.querySelector() to get references for the <arcgis-map>, <arcgis-chart> and <arcgis-charts-action-bar> components.

Use dark colors for code blocks Copy

1
2
3
const mapElement = document.querySelector("arcgis-map");
const chartElement = document.querySelector("arcgis-chart");
const actionBarElement = document.querySelector("arcgis-charts-action-bar");

Load the bar chart

Since we are going to use property values from the map component, we'll use the arcgisViewReadyChange event to determine when the map is ready.

Use dark colors for code blocks Copy
```
1
2
3
mapElement.addEventListener("arcgisViewReadyChange", async (event) => {
  // to be implemented
});
```
Inside the event listener, get the map and view from the event target.

Use dark colors for code blocks Copy
```
1
const { map, view } = event.target;
```
Use find to get the CollegeScorecard layer from the map.

Use dark colors for code blocks Copy
```
1
const layer = map.layers.find((layer) => layer.title === "CollegeScorecard");
```
First, set the chart elementâs layer property to the feature layer. Then, set its model property using the first existing chart model from the layer. Setting the model last ensures the chart renders correctly.

Use dark colors for code blocks Copy
```
1
2
chartElement.layer = layer;
chartElement.model = layer.charts[0];
```

Filter chart data by map extent

In the callback function of the arcgisViewReadyChange event listener, set the chart elementâs view property to the mapâs view.

Use dark colors for code blocks Copy
```
1
chartElement.view = view;
```
This will enable the chart to filter it's data based on the current map extent. To use this, you can click on the Filter by extent action in the chart's action bar. When you pan or zoom the map, the chart will automatically update to show only the features that are currently within the map's extent.

Synchronize chart selection with map highlights

In the callback function of the arcgisViewReadyChange event listener, get the layer views from the view.

Use dark colors for code blocks Copy
```
1
const featureLayerViews = view.layerViews;
```

Add a listener for the arcgisSelectionComplete event on the chart element to clear the previous selection and highlight the new features on the map.

Use dark colors for code blocks Copy

1
2
3
4
chartElement.addEventListener("arcgisSelectionComplete", (event) => {
  map.highlightSelect?.remove();
  map.highlightSelect = featureLayerViews.items[0].highlight(event.detail.selectionData.selectionOIDs);
});

Highlight chart data based on map selections

Outside of the arcgisViewReadyChange event listener, add a second event listener to the mapElement: arcgisViewClick.

Use dark colors for code blocks Copy
```
1
2
3
viewElement.addEventListener("arcgisViewClick", (event) => {
  // to be implemented
});
```
In the arcgisViewClick event listener's callback, get the view from the event target.

Use dark colors for code blocks Copy
```
1
const { view } = event.target;
```

Get the screen points from the event's detail property.

Use dark colors for code blocks Copy

1
2
let screenPoints = event.detail.screenPoint;
view.hitTest(screenPoints).then(getFeatures);

Lastly, get the features from the hit test. Within the function, get the selected feature's OID (in this case, the attribute is ObjectId) and assign it to the chart element's selection data.

Use dark colors for code blocks Copy

1
2
3
4
5
6
7
function getFeatures(response) {
  const selectedFeatureOID = response.results[0].graphic.attributes["ObjectId"];

  chartElement.selectionData = {
    selectionOIDs: [selectedFeatureOID],
  };
}

Run the application

The application should display a bar chart overlaying on bottom left of the map. When you select features on the chart, the corresponding features will be highlighted on the map. With the Filter By Extent action from the action bar enabled, the bar chart will only show features within the current map extent. Additionally, selecting features on the map will highlight the corresponding features on the chart.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4