الدرس 4 · الوحدة 5: Making Dashboards Interactive
Number and date selectors: time windows and value ranges
الفيديو قريبًا
Learn it with your tutor on the live board
أهم نقاط الفيديو
The storm is over, now what?
- Storm passed overnight, outages everywhere
- Director asks: last 48 hours only
- And only outages over 500 customers
- One screen, two quick filters
What you will learn
- Filter by time with a date selector
- Filter by value with a number selector
- Combine both and avoid stale windows
How a selector filters
- A selector reads one field in your layer
- It builds a filter from your choice
- Linked elements redraw with matching features
- Numbers and dates, not categories
Date selectors: calendar or relative
- Calendar: pick a date or a date range
- Predefined: Today, Last 7 days, This month
- Relative windows move with the clock
- Filter on the field that fits the question
Number selectors: one value or a range
- Single value with an operator: greater than 500
- Range: minimum and maximum, 8 to 12
- Slider for browsing, spinner for exact typing
- Set sensible limits and step size
Setting one up in the editor
- Add element, then choose number or date selector
- Pick the layer and the field
- Set type, limits and a default value
- Actions tab: tick the target elements
Worked example: water main breaks
import pandas as pd
breaks = pd.DataFrame({
"id": [1, 2, 3, 4, 5, 6],
"reported": pd.to_datetime([
"2026-09-03", "2026-09-18", "2026-09-22",
"2026-09-25", "2026-09-27", "2026-09-28"]),
"diameter_in": [6, 12, 8, 16, 4, 10],
})
today = pd.Timestamp("2026-09-28")
start = today - pd.Timedelta(days=7)
recent = breaks[breaks["reported"] >= start]
sized = recent[recent["diameter_in"].between(8, 12)]
print("All breaks:", len(breaks))
print("Last 7 days:", len(recent))
print(sized[["id", "diameter_in"]].to_string(index=False)) Two selectors work together
- Each selector adds its own rule
- Rules combine with AND: both must match
- More selectors means fewer features
- An empty map may just mean too narrow
Placement and defaults
- Put selectors in the header or sidebar
- Default to the most common question
- Label with units: customers, inches, hours
- Let people clear a selection quickly
Common mistake: a frozen window
- Calendar range picked on build day
- Next week the dashboard shows old data
- Use relative windows for live monitoring
- Check the date field and time zone
Recap
- Date selectors: calendar or relative windows
- Number selectors: single value or range
- Selectors combine with AND; keep windows relative
Your exercise
- Use your own incident layer, or one from Living Atlas
- Add a date selector: Last 7 days default
- Add a number range selector on one numeric field
- Link both to the map and one chart
النص المكتوب
The storm is over, now what?. Picture the morning after a big storm. Your outage dashboard shows every outage from the past month: hundreds of points on the map, busy charts, and a total that means nothing right now. The operations director walks in and asks one question. What happened in the last 48 hours, and which outages hit more than 500 customers? Could you answer that in ten seconds without editing the dashboard? With a date selector and a number selector, you can. You drag a slider and pick a time window, and the whole screen redraws around the answer. That's what this lesson builds.
What you will learn. By the end of this lesson you'll be able to do three things. First, add a date selector that limits your dashboard to a time window, such as the last seven days of service requests. Second, add a number selector that keeps only features inside a value range, such as water main breaks on pipes between eight and twelve inches wide. Third, combine the two so they work together, and set them up so the window stays current tomorrow and next month instead of freezing on the day you built it.
How a selector filters. In the last lesson, category selectors filtered by labels like "open" or "closed". Number and date selectors work on fields that hold numbers or dates. A field is simply one column in your layer's attribute table, like "customers affected" or "reported date". A filter is a rule that says which rows stay. Think of a sieve: only features that fit the holes pass through. When someone moves the selector, the dashboard builds that rule on one field and sends it to every element you linked: the map, a serial chart, which is the bar or line chart in dashboards, and an indicator. Each one redraws using only the matching features.
Date selectors: calendar or relative. A date selector gives people two main ways to choose time. The calendar option lets them pick one day or a start and end date, which suits questions like "what did we log during the hurricane week?" The predefined option offers ready-made windows such as Today, Last 7 days, or This month. These are relative windows, meaning they're measured back from right now, so "Last 7 days" on Friday and on Monday cover different days automatically. Also check which date field you filter. A service request has a created date and a closed date, and "requests from last week" means something different for each.
Number selectors: one value or a range. The number selector has two shapes. A single value is paired with an operator, the comparison word in the rule, such as equal to, less than, or greater than. That's the one for "outages affecting more than 500 customers": one number and greater than. A range has a minimum and a maximum, which suits "pipe diameters from eight to twelve inches". You can show either as a slider, good for browsing, or a spinner box, good when someone needs an exact number. Set the limits to match your real data, and pick a step size so the slider moves in useful jumps, like 50 customers at a time.
Setting one up in the editor. Here's the setup in the dashboard editor. Add a number selector or a date selector from the element list, usually in the header or sidebar. Choose the layer and the field it should read. Then set the type, the limits, and a default value, which is what the dashboard shows before anyone touches it. Next, open the actions tab and tick every element that should respond: the map layer, the chart, the indicator. If a target uses a different layer, choose the matching field for that layer too. Finally, move the selector yourself and watch each element change before you save.
Worked example: water main breaks. The dashboard does this for you, but seeing the logic in Python makes it concrete. We have six water main breaks, each with a reported date and a pipe diameter in inches. The date selector's "Last 7 days" becomes a start date. Today is September twenty eighth, so today minus seven days is September twenty first. Four breaks are that recent. The dashboard's own edge for "Last 7 days" can differ slightly from this simple subtraction, but the idea is the same. Then the number selector's range, eight to twelve inches, keeps only rows whose diameter falls between those limits, including both ends. Two breaks survive both rules: break three on an eight inch pipe and break six on a ten inch pipe. That's exactly what your map and indicator would show.
Two selectors work together. Notice what happened in that example. The date selector added one rule, the last seven days, and the number selector added another, eight to twelve inches. The dashboard kept only breaks that passed both. That's called AND logic. It works the same way on any layer: a traffic incident must be in the last 24 hours and also have more than two vehicles involved to appear. Every extra selector narrows the result further, like adding more sieves stacked on top of each other. So when a supervisor says the map went blank, check the selectors before blaming the data. Often the time window is short and the value range is tight, and simply nothing matched both rules at once.
Placement and defaults. A few design choices make selectors easy to use in ArcGIS Dashboards. Put them in the header or a sidebar, so they don't compete with the map for space. Choose a default that answers the question people ask most often. For a storm operations room, that might be the last 24 hours and every outage size. Label every selector with its unit, so nobody wonders whether 500 means customers or meters. And here's a small thing with a big payoff: make sure people can clear the selection in one click, so returning to the full picture never needs a reload.
Common mistake: a frozen window. The most common mistake is a frozen time window. You build the dashboard on Monday, set the default to a fixed calendar range from last Monday to today, and it looks perfect. Two weeks later the operations room opens it and sees a window that ended ages ago, while new incidents pile up unseen. For live monitoring, use a relative window like "Last 7 days" or "Today". Two related checks: make sure you're filtering the right date field, and remember dates are stored in universal time, so an incident near midnight can land on a different day's date than you expect.
Recap. Let's wrap up. A date selector filters by time, either with a calendar for fixed periods or with relative windows that keep moving with the clock. A number selector filters by value, with a single value and an operator, or with a range between a minimum and a maximum. When you use several selectors, their rules combine, so a feature must match all of them to appear. And for live monitoring, keep your time windows relative so they never freeze. With these two elements, the storm morning question from the start takes a few seconds instead of an edit session.
Your exercise. Now it's your turn. Open a dashboard built on an incident layer. Your own service requests or incident layer is the best choice. If you don't have one, search Living Atlas, Esri's free library of ready-made layers, for an incident layer you can use. Add a date selector on the reported date field with a predefined default of "Last 7 days". Add a number selector with a range on one numeric field, such as severity or customers affected, with limits that match the data. Link both to the map and one chart. Then test it: narrow the range until the map goes empty, and note which combination did it. We'll use that dashboard in the next lesson.
ملخص الدرس
- مشاهدة الفيديو
- Date selectors: calendar or relative windows
- Number selectors: single value or range
- Selectors combine with AND; keep windows relative