ArcGIS Dashboards

Create your first dashboard using ArcGIS Dashboards

ArcGIS Dashboards enables users to convey information by presenting location-based analytics using intuitive and interactive data visualizations. A dashboard is a view of geographic information and data that allows you to monitor events, make decisions, inform others, and see trends. Dashboards are designed to display multiple visualizations that work together on a single screen. They offer a comprehensive view of your data and provide key insights for at-a-glance decision-making.

For more information, see What is a dashboard.

 

About this tutorial

In this tutorial you will create a simple dashboard using ArcGIS Dashboards. The dashboard uses a map of medical facilities in Los Angeles County (sample data only) and includes interactive chart and list elements.

You can view the completed dashboard and follow along by using the Los Angeles Health Facilities web map.

Tutorial dashboard
View the dashboard

A dashboard is composed of several elements that work together. Each element is unique and has its own unique configuration settings. For more information, see Dashboard layout.

The dashboard will include four elements; a map, serial chart, list, and header. The map will be configured to interact with the chart and list, and the list will be configured to interact with the map.

Follow the steps below to create the dashboard and configure its elements.

 

Create a dashboard

A map is often the centerpiece of a dashboard. Best practices are important for the dashboard experience. Apply basic map craft such as configuring effective pop-ups, using scale dependencies, and more. For details, see Create web maps for dashboards.

Step 1 – Open the sample map item page and sign in to your account.

Sign in

Step 2 – Click Create Web App then choose Dashboards.

Dashboards

Step 3 – Enter the required information.

Add a title (a), optional tags (b), and optional summary (c). Click Create dashboard (d) when finished.

Create dashboard

The dashboard will open after you click Create dashboard. You have created a new dashboard with a single map element. As you continue crafting your dashboard, the Save button in the top right will become enabled. It’s a good idea to save your work as you make changes.

Save

Next, you will configure the map and add serial chart, list, and header elements.

 

Configure the map element

Maps play a central role in many dashboards. Not only are they often the most effective way to display your geographic information, but their operational layers can also be used by other data visualizations in the dashboard to create interesting, intuitive, and compelling information elements.

In this section you will:

Step 1 – Configure the map element.

Point to the upper left corner of the map to display a blue bar which will reveal the menu. You can access all of an element’s settings through this menu. Click the Configure button.

Configure

Step 2 – On the Settings tab, choose which tools to display in the map. The sample map has configured pop-ups, bookmarks, and a legend, so those tools will be enabled.

In the settings shown below, use the slider to enable (a) pop-ups, (b) default extent and bookmarks, (c) legend, and (d) zoom tools.  Click Done in the lower right when finished.

Settings

 

Add a serial chart element

A serial chart element visualizes one or more series of data points along a horizontal (x) axis and a vertical (y) axis.

In this section you will:

Step 1 – Open the element drop-down menu and choose Serial Chart.

Element drop-down list

Step 2 – Choose the layer the serial chart will use for the data.

There is only one layer in the map: Click Los Angeles Health Care Facilities.

Choose layer

Step 3 – You will see a series of tabs along the left side. Click the Data tab on the left and set the data options.

(a) – Set the Categories From to Grouped Values.

(b) – Choose TYPE from the Category Field from the field dropdown list.

This will group all values of the TYPE attribute in the serial chart segments. Type is also the field by which the health care facilities are symbolized.

Data options

Step 4 – Click the Value axis tab to set the chart axis options. The chart will display the count of various health care facilities, so the value axis will be set for best display results.

(a) – Set the Minimum value to 1.

(b) – Set the axis values to display Integers only.

 

Value axis

Step 5 – Click the Series tab to set the series options. In the Bar Colors section click By Category to display the current bar colors.

Set the bar colors to match the symbols in the web map layer.

The legend for the Los Angeles Health Care Facilities map is shown below.

Legend

Change the color for each series column to match the color of the hospital facility symbols. Click the down arrow to use the color picker, or enter the hex color code for each symbol. The hex color codes are as follows:

Set colors

Step 6 – Click the General tab to set the general options.

(a) – Add a title.

(b) – Since the health care facilities shown in the map are static, we don’t need to display the last update text.

General options

Step 7 – Click Done in the lower right when finished.

Step 8 – Configure the map to trigger a chart update whenever the map extent changes.

(a) – Open the map element configuration options by hovering in the upper left corner of the map element and clicking Configure.

Configure

(b) – Open the Map Actions tab.

(c) – Click Add action and choose Filter.

Add filter action

(d) – Click Add target and choose the serial chart created above as the target.

Add target

Click Done when you finish, then save your work.

Now that the map action has been created, when you pan and zoom the series chart is updated. Hover over the chart to view the count of each facility type.

 

Add a list element

A list element is used to show features or rows from a layer and can contain information from any field.

In this section you will:

Step 1 – Open the element dropdown list and choose List.

Add List element

Step 2 – Choose the layer the list will use for data.

There is only one layer in the map: Click Los Angeles Health Care Facilities.

Select layer

Step 3 – In the Data Options tab, Sort by section, click Add field and choose ALIAS from the drop-down list.

Select Sort by field

Step 4 – Ensure that Ascending as the sort order. This is the default.

This will use the alphabetical ordering from the ALIAS field to sort the displayed list.

Sort ascending

Step 5 – In the Line item text section, click the field list button to configure the line item text.

Choose ALIAS and CATEGORY from the dropdown field list, and arrange them so that they are stacked. You can arrange them by selecting both and inserting a carriage return.

Line item text

Step 6 – Click the Actions tab, click Add action and choose Flash from the dropdown list.

Add flash action

Step 7 – Select the Los Angeles Health Care Facilities map as the target for the flash action.

Select layer

Step 8 – Click Done when finished.

This highlights the feature on the map when it is selected from the list.

Step 9 – Configure the map to update the list whenever the map extent changes.

(a) – Open the map element configuration options by pointing to the upper left corner of the map element and choosing Configure.

Configure

(b) – Click the Map actions tab.

(c) – Click Add Target and choose the list element.

Select map action

Step 10 – Click Done when finished.

After completing these steps, the list will update as the map is panned or zoomed. When you select a facility from the list the feature will highlight on the map.

 

Arrange the dashboard elements

Your dashboard likely shows the list, series, and map elements arranged from left to right.

To arrange the elements, point to the upper left corner and click and hold the Drag item button.

Drag item

Drag the element over another to reveal the docking targets, then release on the desired placement.

Docking targets

Grab the vertical and horizontal bars to finish arranging the dashboard element.

Size elements

 

Add a header element

Now that all the elements have been arranged to your satisfaction, add a title using the header element.

A header is a reserved area along the top of your dashboard that you can use to give your dashboard a title, apply corporate branding standards, and provide links to additional content.

Step 1 – Open the element dropdown list and choose Header.

Select title element

Step 1 – Change the title, and optionally make other changes.

By default, the title that appears on the header panel is the title of the dashboard. Enter a title for your dashboard and make any other changes you like, such as changing the text color or background color.

When finished, click Done and save your dashboard.

 

Best practices

The dashboard created in this tutorial is suitable for general use cases. But if you expect your dashboard will be in very high use and demand, consider following additional implementation practices to ensure it scales effectively to handle high-demand situations.

For more information, see Building highly scalable dashboards.

 

More information

For more information see:

This blog article was originally published on April 20, 2020, and has been updated.

About the author

Corporate tech evangelist and senior principal product manager at Esri, focusing on ways to broaden access to geographic information and helping users succeed with the ArcGIS online system. On a good day I'm making a map, on a great day I'm on one. Follow @bernszukalski or email bszukalski@esri.com

Connect:

Next Article

What's New in ArcGIS Experience Builder Developer Edition (version 1.6)

Read this article