Build an interactive dashboard

ArcGIS Dashboards allow you to display a summary of information—including maps and real-time data—on a single screen to support decision making. Most dashboards display all elements at once to provide information at a glance. However, some situations are better suited to interactive dashboards. These allow users to make selections and filters to focus the dashboard to the information specific to their needs.

In this tutorial, you'll build an interactive dashboard that allows users to find charging stations for electric vehicles in Canada. As electric vehicles become more popular, knowing where charging stations are is important. Having sufficient access to stations can help make the decision to shift to an electric vehicle easier. It's also important to know that you can rely on access to stations when travelling. When it comes to finding charging stations, you don't need to see every location, only the ones that are relevant to your location and your vehicle. You'll configure the dashboard so users can filter the data to the province, city, and connector type that they need.

This tutorial was last tested on February 28, 2024.

View final result

Requirements

• User, Publisher, or Administrator role in an ArcGIS organization (see options for software access)
• ArcGIS Dashboards

Configure a web map and use it to create a dashboard

First, you will set up a web map to serve as the foundation of the dashboard. You will start with a preexisting web map, which already contains the locations of electric vehicle charging stations. You will save a copy of the map to your ArcGIS account so that you can edit it and create a dashboard from the map.

Configure a web map

You'll start by configuring pop-ups in the map, which will be reused later in the dashboard.

1. Open the Electric charging stations in Canada web map.
2. Click Sign In and sign in with your ArcGIS organizational account.

   Note:

   If you don't have an organizational account, see options for software access.

   A map appears, showing charging stations for electric vehicles across Canada. You'll save a copy of this map before you continue.

   

3. If necessary, on the Contents (dark) toolbar, at the bottom, click the Expand button.

   

4. Click Save and open and choose Save as.

   

5. In the Save map window, for Title, add your name or initials to the end of the existing text.

   Note:

   You cannot create two layers in an ArcGIS organization with the same name. Adding your initials to a layer name ensures that other people in your organization can also complete this tutorial. Once a layer has been created, you can rename it in the map to remove your initials, which will not affect the name of the underlying data layer.

   

6. Click Save.

   The map is now ready for you to edit. You'll start by viewing the available layers so you know what data is available to you when you build the dashboard.

7. On the Contents toolbar, click Layers to open the Layers pane.

   

   Three layers are listed in the Layers pane. Electric Charging Stations are the blue dots visible on the map. This data comes from the Government of Canada, Natural Resources Canada, via ArcGIS Living Atlas of the World, and contains location and attribute information for electric vehicle charging stations. It is the primary data that you will use to create your dashboard.

   The OpenStreetMap Amenities for North America layer is not visible on the map because it is configured to only appear at large scales. You'll zoom in to see this layer.

8. On the map, zoom in until more symbols appear on the map.

   

   The OpenStreetMap layer adds context for users when they are looking for a charging station. Since vehicle charging takes time, proximity to amenities like restaurants, shops, or libraries can make a station more attractive. The amenities layer only appears when a user zooms in so that the map is not overloaded with information.

   The third layer, Provinces and Territories of Canada, is turned off. You'll use this layer later to configure spatial actions in the dashboard. Users won't need to see the boundaries, so the layer will never be visible on the map, but having it present will allow users to filter charging stations by province.

   Next, you'll configure pop-ups for the Electric Charging Stations layer.

9. In the Layers pane, click the Electric Charging Stations layer to select it.
10. Expand the Settings (light) toolbar and click Pop-ups.

    

    A sample pop-up appears over the map.

    

    Pop-ups are useful for summarizing a map feature. By default, they show all of a feature's fields and their values. The current pop-up lists many fields, many of them empty. The pop-ups for this layer will be visible on the dashboard that you make, so you'll configure them to only include the information needed by someone looking to find a charging station.

11. In the Pop-ups pane, click Title and confirm that the field is blank.

    

    You'll configure the feature's title in the dashboard instead of the pop-up.

12. Click Fields list and click Select fields.
13. In the Select fields window, click Deselect all to clear all of the fields.
14. Click the Station Name field to select it.

    

    A check mark appears next to the field, and the field appears in the sample pop-up.

    

15. In the Select fields window, click Search fields and type EV Connectors. In the search results, click the EV Connectors field to select it and add it to the pop-up.

    

16. Search for and add the following fields:
    • Street Address
    • Station Phone
    • EV Pricing
    • Access
    • Access Days Time
    • Cards Accepted
    • Date Last Confirmed
17. Click Done.

    The sample pop-up contains nine fields. They appear in the order they were added.

    

18. Close the Pop-ups pane.

Create a dashboard from the web map

Next, you'll save the web map and create a dashboard from it.

1. On the map, click the Default map view button to return to the default map view.

   

   When you save the map, the current extent at the time of save becomes the new default map view. This default extent is what users will first see when they view the dashboard.

2. On the Contents toolbar, click Save and open and click Save to save the map.
3. On the Contents toolbar, click Create app and click Dashboards.

   

4. In the Create new dashboard window, type the following information:
   • For Title, type Vehicle charging stations.
   • For Tags, type electric vehicles and press Enter.
   • For Summary, delete the existing text and type This dashboard allows you to find electric vehicle charging stations near you.
5. Click Create dashboard.

   The new dashboard appears. It has one element: the web map you configured earlier, which takes up the full space of the dashboard.

You created a dashboard from a web map. So far, it looks no different than the map, but next you'll add and configure elements that provide more information about the charging stations shown on the map.

Configure dashboard information elements

You'll create a dashboard that allows users to see the location of all the charging stations in Canada. You'll add a header with a title, an indicator that displays the total number of stations, a table that lists stations for a selected area, and details (from the configured pop-ups) about selected stations.

Add a header

The first element you will add to the dashboard is a header. The header acts as a title for the dashboard. Later in the tutorial, you will also configure the header to include selectors.

1. At the bottom of the dashboard toolbar, click the Expand button.
2. On the toolbar, click the View button to open the View pane.

   

   You can organize all of the elements of the dashboard in this pane.

3. Click the Header tab and click Add header.

   

   The Header configuration window appears, showing settings on the left and a preview on the right.

4. For Title, type Electric vehicle charging stations.

   

   The header element by default includes a menu with a sign out option. Since this dashboard is meant to be used by the public, users will not need to sign in and out. You will remove this menu.

5. Expand the Menu links section and turn off Sign out.

   

6. Click Done.

   The header appears above the map in the dashboard.

   

Add an indicator for operational stations

The next element you will add is an indicator, summarizing the number of operational charging stations in Canada. Later in the tutorial, you'll configure the indicator so the number it displays is dependent on the filters chosen by the user.

1. On the toolbar, click Add element.

   

   When the Add element button turns blue, the colors on the map fade and Add buttons appear on the map's edges. You can add elements through the Layout pane, like you did for the header, but the Add element method allows you to specify the position of elements as you add them.

2. Below the map, click the Add button and click Indicator.

   

   In the Select a layer window, you are prompted to choose which of the map's layers will provide the data for the indicator.

3. In the Select a layer window, click Electric Charging Stations.

   

   A preview of the indicator appears.

   

   By default, an indicator’s value is the count of features in the data source. In this case, the value is the total number of operational stations across Canada. Since this layer receives updates daily, the preview may show a different number than the images in this tutorial.

   The indicator has no context to explain the meaning of the number. You'll add labels to explain its meaning.

4. Click the Indicator tab. For Bottom text, type Operational stations.

   

5. Click Add icon.
6. Expand Miscellaneous and click the check mark in a circle icon.

   

7. Click OK.
8. In the Indicator options pane, ensure that Position is set to Left.

   In the preview, the icon appears next to the number. You'll change its color to match the map's symbols.

9. Click the Fill color. For Hex, type 005ce6 and press Enter.
10. Expand the Value formatting section and turn off Unit prefix.

    The preview now shows the exact number of stations instead of a rounded number.

    

    Later, you will connect the indicator element to others on the dashboard, so the number can change based on filters that the user applies. For now, you'll give the indicator element a meaningful name so it is easier for you to identify it later when you configure actions.

11. Click the General tab.
12. For Name field, type Operational stations indicator.
13. Click Done.

    The indicator element appears on the dashboard below the map. It is too large, but its size will change as you add more elements.

Add a table

A table is useful for showing fields and values from the data in an organized way. In an interactive dashboard, a table can also be the source of an action. For example, in the dashboard, users will select stations in the table to view more details. You'll configure a table to show a few key fields that will give users a quick overview of a station before they choose to learn more about it.

1. On the toolbar, click Add element.
2. Point to the indicator element.

   New Add buttons appear over the indicator.

3. Click the Add button on the left side of the indicator. Click Table.

   

4. In the Select a layer window, click Electric Charging Stations.

   The Table configuration window appears.

5. For Table type, choose Features.
6. For Value fields, click Add field and choose Station_Name.

   

   The Station Name field appears in the Value fields list and as the first column in the preview table.

   

   The Value fields section determines the columns of the table, with each row representing an individual feature.

7. Click Add field four more times and add the following fields:
   • Street_Address
   • City
   • ZIP
   • Facility_Type

   The preview table updates to include the new fields.

8. Click the Table tab and turn on Row striping.

   

   The rows in the preview table now alternate between white and pale gray, making the table easier to read.

   Next, you'll configure the appearance of the table's header, to make it stand out more on the dashboard.

9. Click the Header tab.
10. In the Label override section, remove the underscore from the labels, so the labels are Station Name, Street Address, and Facility Type.
11. Change the Text color value to #ffffff. Change the Background color to #004da8.

    The table's header changes to a dark blue color with white text.

    

    The table’s visual area is now configured. Next, you will name the table so it is easier to identify later when you set up actions.

12. Click the General tab. In the Name field, type Station table.

    Since you are going to configure this table to only display information after a viewer has selected at least one location, you will also configure some text to display when there is no selection for the table.

13. Expand the No selection section and next to Label, click Edit.
14. In the text editor, click the Format button and choose Heading 3.

    

15. In the text editor, type Select a province to start viewing stations.
16. Click Done.

    The table appears next to the indicator on the dashboard.

    

Add a details element

The details element displays information about features. You'll use it to display the pop-up contents of charging stations, which you previously configured in the web map.

1. On the toolbar, click Add element.
2. Click the Add button on the left of the dashboard and click Details.

   

3. In the Select a layer window, choose Electric Charging Stations.

   A preview of the details element appears. It lists the same fields that you previously configured for the pop-up.

4. Click the General tab. For Name, type Station details.
5. For Title, click Edit.
6. Click the Format button and choose Heading 2. Type Station details.

   

   The title appears on the preview.

   

7. Expand the No selection section. For Label, click Edit.
8. Click the Format button and choose Heading 3. Type Select a station to view details.

   This message will appear in the details element whenever no station is selected.

9. Click Done.

   The details pane appears on the dashboard, to the left of the other elements. It takes up half of the width of the dashboard.

10. Drag the right edge of the details pane until it takes up about 25 percent of the dashboard's width.

    

The dashboard is now configured with a map, a header, an indicator, a table, and a details element. Next, you'll give users the ability to filter the data on the dashboard.

Configure dashboard selectors

Right now, the dashboard displays information about all charging stations in Canada. However, most users won't need information about stations in a different city or a different province. They are also only interested in stations that have the right connector type for their car.

Next, you will add three selectors so users can narrow down their station search by province, city, and connector type. The selectors will filter the dashboard to only display the information relevant to the user.

Add a province selector

The first selector you will add will allow users to choose a province or territory. The selector will also act as the first interaction users will have with the dashboard.

1. If necessary, on the toolbar, click the View button to open the View pane.
2. In the View pane, click the Header tab. Click Add selector and click Category selector.

   

   You'll configure this selector to be a drop-down list of all of the provinces and territories in Canada. You have a layer in the map representing provinces and territories, so you'll create the selector's categories from this layer's features.

3. For Categories from, choose Features.
4. In the Select a layer window, click Provinces and Territories of Canada.

   

5. For Line item template, click the Add field button and choose PRENAME.

   

   PRENAME is short for province English name. The preview updates to show a province name.

   

6. Click the Selector tab. For Label, type Select a province.

   The text on the preview updates.

7. Click Add icon.
8. Expand the Hub section and click the Boundaries icon.

   

9. Click OK.
10. Turn on Show search.
11. Click the preview.

    The list of provinces appears. At the top is a search bar that allows you to search the list with text.

    

    You'll add an item to this list that allows users to select no province or territory.

12. Turn on None option. For Label for none, type No province selected.

    

    The preview updates to show the new text.

13. Expand the General section. For Name, type Province selector.
14. Click Done.

    The province selector appears on the dashboard's header, above the map.

    

Add a city selector

The second selector you will add is a city selector. This selector will allow users to filter charging stations to a specific city or town.

1. In the View pane, on the Header tab, click Add selector and choose Category selector.

   For the last selector, you created categories from features. This time, you don't have any features representing cities. You can, however, configure the selector to list all of the values found in the City field in the Electric Charging Stations layer. You can achieve this with the Grouped values option.

2. In the Categories from section, choose Grouped values.

   

3. On the Select a layer window, choose Electric Charging Stations.
4. For Category field, choose City.

   The City field is also added to the Sort by section. This will sort the cities alphabetically in the selector to make them easier to find.

   

   Maximum categories is set to 50, which means that only the first 50 cities will appear in the selector. There are more than 50 cities and towns in most provinces, so you will increase this limit.

5. For Maximum categories, type 350.
6. Click the Selector tab. For Label, type Select a city.

   The new label appears on the preview.

   

7. Click Add icon.
8. Expand the Hub section, choose the City icon and click OK.

   

   The icon appears on the preview. Next, you'll ensure that users can choose more than one city at a time.

9. For Selection, choose Multiple. For Placeholder text, type No city selected.

   

10. Turn on the toggle buttons for Show search and Show reset and select all.
11. Click the preview to expand the list of cities.

    

    Reset and Select all buttons appear below the list. These tools can help users interact with longer lists more easily.

12. At the bottom of the pane, expand the General section.
13. For Name, type City selector.
14. Click Done.

    The new selector appears on the dashboard's header.

    

Add a connector selector

The last selector you'll add will allow users to choose a connector type that is compatible with their vehicle. The selector will be used to filter other elements to only display stations with the selected connector type.

1. In the View pane, on the Header tab, click Add selector and choose Category selector.
2. For Categories from, choose Grouped values.
3. On the Select a layer window, choose Electric Charging Stations.
4. For Category field, choose EV_Connector_Types.

   

5. Click the Selector tab.
6. In the Label field, type Select connector type.
7. Click Add icon.
8. Expand the Points of interest section, choose the fueling station icon, and click OK.

   

9. For Selection, choose Multiple.
10. For Placeholder text, type No connector selected.
11. Turn on Show search and Show reset and select all.

    

12. Expand the General section. For Name field, type Connector selector.
13. Click Done.

    

All three of the selectors are now configured. However, they can't yet be used to filter data on the dashboard. Next, you'll configure actions to connect all of the dashboard's elements so users can tailor the dashboard to their needs.

Configure actions

When creating an interactive dashboard, it is recommended that you configure all of the elements first and then configure the actions that connect them and make the dashboard interactive. Building the dashboard in this order is recommended because the available actions are determined by how each element is configured.

Now that all of the dashboard elements are set up, you can configure the interactivity of the dashboard with actions.

Configure actions for the province selector

First, you will configure actions for the province selector. The selectors are the primary interaction users will have with the dashboard. They will allow users to tailor the stations they see to their location and connector type. The highest level of filtering will come from the province selector, which will filter the other selectors and the table element.

1. If necessary, on the toolbar, click the View button to open the View pane. Click the Header tab.
2. Point to Province selector. Click the options button and click Configure.

   

   The Category selector configuration window appears.

3. Click the Actions tab.

   You can configure a Filter, Flash, Show pop-up, Pan, or Zoom action to occur when a new province is selected.

   

   The first action that you'll configure is a filter action. When users select a province in the province selector, it will filter the city selector to only show cities within that province.

4. Click Filter to expand this section.
5. Turn on City selector.

   Actions connect two different elements. They are configured on the element that is triggering the action (in this case, the province selector), rather than the element that reacts to the action (in this case, the city selector).

   Since the two elements have different data sources, you must connect them with matching fields. Fortunately, both layers contain fields with province abbreviations formatted in the same way.

6. For Source field, choose Province Postal Abbreviation. For Target field, choose State.

   

   You'll set up more actions so that the map, the indicator, and the table are also filtered when a province is selected.

7. Under Electric charging stations in Canada, turn on the filter action for Electric Charging Stations. Set Source field to Province Postal Abbreviation and set Target field to State.

   

8. Turn on the filter action for Operational stations indicator and Station table. For each of these elements, set Source field to Province Postal Abbreviation and set Target field to State.

   The table is not very helpful when it displays all of the stations in Canada. You'll configure it so it only displays information when a province is selected.

9. In the Station table section, check the Render only when filtered check box.

   

   You'll add one more action to the province selector, to make the map zoom to the selected province.

10. Expand the Zoom section and turn on Electric charging stations in Canada.

    

11. Click Done.

    The dashboard looks the same as before, except that the table has been replaced by a message.

    

    You'll test that the actions you configured are working as expected.

12. On the header, click Select a province and choose Prince Edward Island.

    The map zooms to Prince Edward Island. The table populates with charging stations in this province only. The indicator element shows a smaller number than before.

13. On the header, click Select a city.

    

    Only cities and towns with charging stations in Prince Edward Island are listed.

Configure actions for the city and connector selectors

Next, you will configure actions for the other two selectors. The city selector will further filter the connector selector, the map, the indicator, and the table. The connector selector will further filter the map, indicator, and table.

1. In the View pane, point to City selector, click the options button, and click Configure.

   

2. Click the Actions tab.

   The city selector was created with grouped values (instead of features), so the only action type available is Filter.

3. Expand the Filter section.
4. Turn on Connector selector, Electric Charging Stations, Operational stations indicator, and Station table.

   

   You don't need to define matching fields this time because all of the connected elements are based on the same layer: Electric charging stations in Canada.

5. Click Done.

   Last, you will configure the connector selector actions.

6. In the Layout pane, point to Connector selector, click the options button, and click Configure.
7. Click the Actions tab and expand the Filter section.
8. Turn on Electric Charging Stations, Operational stations indicator, and Station table.

   

9. Click Done.

   You'll test that the actions behave as expected together.

10. If necessary, on the header, click Select a province and choose Prince Edward Island.
11. Click Select a city and choose Charlottetown.

    The map, table, and indicator all update to show fewer stations.

    

12. On the header, click Select connector type.

    

    The list has fewer options than before.

13. In the connector selector, click TESLA.

    The map, table, and indicator all update to show fewer stations.

Configure table actions

The last actions you will configure are on the table. The table only populates once a province is selected on the header. Similarly, you will ensure that the details element only populates when a station is selected in the table. Otherwise, viewers will see details for stations that are probably not relevant to them. When there is no selection on the table, the message you configured earlier will display.

1. In the View pane, click the Body tab.
2. On the Body tab, point to Station table, click the options button, and click Configure.

   

3. In the Table configuration window, click the Actions tab and expand the Filter section.
4. Turn on Station details and check the Render only when filtered check box.

   

   You'll also configure an action that causes features to flash on the map when they are selected in the table.

5. Expand the Flash section and turn on Electric charging stations in Canada.

   You'll add one more action to cause the map to zoom to the selected feature.

6. Expand the Zoom section and turn on Electric charging stations in Canada.
7. Click Done.
8. On the dashboard, click any row in the table.

   

   The details element populates with the pop-up information for the selected feature. The map zooms to the selected feature, which flashes.

Share the dashboard

Lastly, you will share the dashboard for viewing.

1. On the dashboard toolbar, click Save and click Save.

   

2. Next to the dashboard's title, click the menu button and click Dashboard item details.

   

   The dashboard's item page appears. You'll view the dashboard and test it before sharing it.

3. Click Open Dashboard.

   

   The dashboard appears in a new browser tab. The table and details elements are empty.

4. Use the dashboard to find J1772 charging stations in Thunder Bay, Ontario.

   

5. Return to the item page and click Share.
6. In the Share window, choose Everyone (public) and click Save.

   To view the dashboard without signing in, you will need to share the web map used in the dashboard with everyone.

7. On the ribbon, click on Content.
8. On the Content page, under Title, for Electric charging stations in Canada, click on Update sharing icon.

   

9. In the Share window, choose Everyone (public) and click Save.

In this tutorial, you built an interactive dashboard that allows users to find electric vehicle charging stations across Canada. You configured the dashboard to allow users to tailor the information they see to their needs, including location and connector type.

You can find more tutorials in the tutorial gallery.

Acknowledgements

• Card gallery image by Tong Palong.
• Electric Charging Stations: Government of Canada, Natural Resources Canada, Electric Charging and Alternative Fuelling Stations Locator
• OpenStreetMap Amenities for North America: © OpenStreetMap contributors
• Provinces and Territories of Canada: Statistics Canada, 2021 Census - Cartographic Boundary files
• Light Gray Canvas map sources: Esri, HERE, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community