2 – Authoring ArcGIS DashboardsDerek Law, Product Manager - Apps

Topics

• Getting started with ArcGIS Dashboards• COVID-19 examples• Authoring workflow• Dashboard elements• Layout options

Designing a dashboard

• Know your audience:- What question(s) are they trying to answer?- What actions will be enabled by this information?- What is their technical level?- How are they going to view the dashboard?

- Web browser vs. mobile device

• Express information clearly and accurately

• Focus attention to where it is needed

vs

COVID-19 dashboard exampleshttps://www.esri.com/en-us/covid-19/overview

• Several ways to open the app1. App Launcher2. Map Viewer

- Share > Create a web app > Dashboards3. Content page

- Create > Create apps > Dashboards4. Web map item page

- Create web app > Dashboards

Getting Started with ArcGIS Dashboards

A

1

2

3

4

Launching ArcGIS Dashboards

• 2 workflows1. Map Viewer | Web map item page

• Web map automatically in dashboard

2. App Launcher | Content page- Start with an empty dashboard- Conceptually like a “blank canvas”

Dashboard

Dashboard

Side Note: Dashboard home page

• Create and manage dashboards- View, edit, update metadata

• Search and sort dashboards in your organization

Creating a new dashboard

1. Open ArcGIS Dashboards

2. Add elements- Select, configure, and position (in layout)- WYSIWYG user experience

3. Adjust dashboard layout, if needed

4. Enable interactions (optional)

Dashboard

A

Dashboard Elements Many data visualization options

Dashboard elements

• Header• Side Panel• Map and Map Legend• Serial chart• Pie chart• Indicator

• Does a dashboard need to have ALL of these elements?

• Gauge• List• Details• Rich text• Embedded Content

Adding elements to a dashboard

1. Select element2. Configure properties

- Data source and formatting- Appearance- Will vary depending on the element type

3. Place in dashboard layout

A

Parameters

Header and Side Panel elements

• Header- Provides a title, subtitle, logo and background for branding- Options

- Selectors for interactivity- Hyperlinks- Sign Out link

• Side Panel- Use to contain selectors for interactivity- Title, description- Optional: retract in display

• Their layout locations do not change Dashboard

A

cases by class

Map element

• Displays geographic and spatial data inweb map

• Properties- Title and description- Can enable pop-ups, map tools

- Default spatial extent and bookmarks- Legend, layer visibility, basemap, search, and zoom in/out

- Map and layer actions

• A dashboard can have multiple map elements

Map tools

Map Legend element

• Provides a legend for a map element• Contents determine by map layers

- Ordered determined by web map

• Respects layer visibility and scale ranges

• Properties- Title and description

Charts in dashboards

• Visualize your data so that you can make better decisions faster• Likely one of the key data visualizations used in a dashboard

• Serial Chart → Compare something between different groups or track change(s) over time• Pie Chart → Show part-to-whole relationships or for data composition

of people are visual thinkers

A

Serial Chart element

• Visualizes one or more series of data points on a x/y graph• They can be used to show one or more datasets• Bar, line, and smooth line charts are supported

Serial Chart types

• Bar charts → Display data with discrete categories (e.g., types of crime)

• Line and smooth line charts → Display data with continuous categories (e.g., dates)- Can also be rendered as area charts

A

Serial Chart types

• Multi-series charts → Display multiple datasets, used to compare different datasets- Grouped

- Stacked

- 100% stacked

A

Anatomy of a Serial Chart

• Common components- All are configurable properties

1. Scrollbar2. Hover text3. Grid lines4. Guides5. Legend6. Label7. Axis title8. Axis

Properties

Pie Chart element

• Circular chart divided into sections; each section is proportional to the quantity it represents• Displays a single series of data points• Used to show part-to-whole relationships or data composition• Not meant to show comparisons between sections• Option: donut chart representation

Pie Chart tips

• Use ‘donut’ style over ‘pie slices’ style- Comparing lengths of arcs vs. angles & areas

more complex for the eye to judge

• Or perhaps bar chart might be better

• Limit to 6 categories or less- Too many small categories not useful

• Use labels or legend, not both

Indicator element

• Card that can display- Feature count- Summary statistic → sum, avg, min, or max- Compare a computed value to a reference value

- Based on a threshold

• Can apply filters• Option to set conditional formatting

- Appearance changes based on a condition

• Option to only display icon

Anatomy of an Indicator

• Each area is optional and can have text displayed• HTML code is supported• Middle section has icons (right or left)

- Custom icons supported, use scalable vector graphics (SVGs)

Top

Middle

Bottom

Some Indicator examples

Gauge element

• Show the value of a single metric; defined by minimum and maximum values- Value can be fixed or dynamic

• 2 styles:1. Progress gauge

- Convey a parameter is moving forward or backward- Can define thresholds to show progression- Rendered as circle, horseshoe, or half donut

2. Meter gauge- Display the amount, level, or contents of a parameter- Rendered as horseshoe or half donut

List element

• Displays a collection of features or rows from a layer• Can limit the number of features displayed• Can apply filters and sorting

• Only display relevant information- Purpose of the list

• Considerations:- Which attributes are needed?

- In what order?- How many features?

Details element

• Displays item specifics about features or rows from a layer• Information based on the layer’s pop-up information

- Title, content, media, and attachments

• Supports filtering and sorting• Can limit the number of features displayed

• Useful for interactive dashboards- Target element for actions- Set media refresh interval if images are updated

Rich Text element

• Enables text content to display in the dashboard- Can help provide additional context

• Supports rich text elements- Text, web links, images, and videos

• HTML editor, WYSIWYG user experience

Embedded Content element

• Include web pages, video, and apps (e.g., Survey123 forms) • Social media content• Can provide additional context to dashboard

A

Dashboard layout options

• Elements can be positioned in any combination- Exceptions Header and Side Panel

• Elements can be stacked or grouped- Stack elements

- Position elements in same location, tab to switchbetween them

- Group elements- Aggregate into a single unit- Hold ‘shift key’ to enable grouping

stack

group

Dashboard theme

• Light vs dark display theme

Resources

• ArcGIS Dashboards- ArcGIS Dashboards – Useful Links blog- Monitoring COVID-19: A Dashboard Lesson- Create your first dashboard using ArcGIS Dashboards blog- Operations Dashboard for ArcGIS: An Introduction UC Technical session video