How do I build a dashboard with several charts? Build yours in Altair

Practice layering and composition with three clinic charts, and distinguish this lab from the complete decision dashboard.

Free course. Your Maestro, an AI, .

Now it's your turn. You'll use , a Python library for describing charts: you say which column goes on each axis, and Altair draws the chart. You don't need to know Python for this exercise: the code for all three charts is already written, and you decide how they come together as a dashboard.

If you work in another tool (Excel, Power BI, Looker Studio), the same ideas carry over: one chart per question, the target layered over whatever it's compared with, and a layout that follows the decision. You practice them in code here because every step is written down where you can review it, and because code is exactly what an AI will hand you when you ask it for a dashboard.

Before the exercise, here's how a dashboard comes together in Altair, step by step.

This is a partial composition lab. The exercise puts the trend first to practice vconcat, hconcat and layers; it does not yet include the four-metric header and its comparisons. It is not the complete dashboard from the previous reading-order lesson. At the end, you will explain how to reorder it for Lucía's decision.

Three pieces and two ways to combine them

Worked example · 4 steps

You have the charts for Lucía's dashboard. How do you put the target on top of a chart, and how do you arrange several charts on one screen? Try to guess each step before you open it.

Work out the next step yourself, then open it to compare.

Here's the difference between + and the two functions: + puts one thing on top of another, in the same chart; hconcat and vconcat put charts next to each other, each with its own axes. The target uses +, because it has to share axes with whatever it's compared to. If it's not clear when to use + and when to use hconcat, ask your Maestro.

Try it

The editor has the three charts for Lucía's dashboard, already calculated with the definition sheet: the trend (with its target), no-shows by site, and occupancy by site for the latest week. Both targets, horizontal and vertical, are there too. But the last line only shows the trend.

Change that last line so the dashboard has the trend on top and, below it, side by side, no-shows by site with the target layered on top and occupancy. You'll need alt.vconcat, alt.hconcat and one +. If the dashboard doesn't show up or you get an error, paste it to your Maestro.

Your turn

Change only the last line. Combine the charts with alt.vconcat and alt.hconcat: tendencia on top and, below it, por_sede with the target layered on it (por_sede + meta_vertical) next to ocupacion. You're done when you see three charts and the dashed line crosses the site bars at 10%.

Data: citas-clinica, 117 rows

The exercise's data, "citas-clinica". Your edits run with your code.
Row											Remove
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Page 1 of 6

Your code (Python)

# Each chart answers one question. No-shows are counted

# against active appointments: scheduled minus canceled with notice.

base = alt.Chart(data).transform_calculate(

en_pie="datum.agendadas - datum.canceladas"

)

ultima_semana = "time(datum.semana) == time('2026-09-21T00:00:00Z')"

# Weeks start on Monday. We mark every other Monday, in UTC

# (the time zone the dates come in), so they don't shift by a day.

lunes = [

alt.DateTime(year=2026, month=m, date=d, utc=True)

for m, d in [(6, 29), (7, 13), (7, 27), (8, 10), (8, 24), (9, 7), (9, 21)]

]

# The 10% target, as a dashed line: horizontal and vertical.

meta_horizontal = base.transform_aggregate(n="count()").mark_rule(strokeDash=[4, 4]).encode(

y=alt.datum(0.10)

)

meta_vertical = base.transform_aggregate(n="count()").mark_rule(strokeDash=[4, 4]).encode(

x=alt.datum(0.10)

)

# 1. How is the clinic doing against the target?

linea = base.transform_aggregate(

inasistencias="sum(inasistencias)", en_pie="sum(en_pie)", groupby=["semana"]

).transform_calculate(

tasa="datum.inasistencias / datum.en_pie"

).mark_line(point=True).encode(

x=alt.X("utcyearmonthdate(semana):T", title="Week", axis=alt.Axis(format="%d/%m", values=lunes)),

y=alt.Y("tasa:Q", title="No-show rate", axis=alt.Axis(format="%")),

)

tendencia = (linea + meta_horizontal).properties(width=440, height=150)

# 2. Which site has the problem this week?

por_sede = base.transform_filter(ultima_semana).transform_aggregate(

inasistencias="sum(inasistencias)", en_pie="sum(en_pie)", groupby=["sede"]

).transform_calculate(

tasa="datum.inasistencias / datum.en_pie"

).mark_bar().encode(

x=alt.X("tasa:Q", title="No-show rate", axis=alt.Axis(format="%")),

y=alt.Y("sede:N", title=None, sort="-x"),

).properties(width=180, height=100)

# 3. Is there room on the schedule to rebook?

ocupacion = base.transform_filter(ultima_semana).transform_aggregate(

agendadas="sum(agendadas)", espacios="sum(espacios)", groupby=["sede"]

).transform_calculate(

ocupacion="datum.agendadas / datum.espacios"

).mark_bar().encode(

x=alt.X("ocupacion:Q", title="Occupancy", axis=alt.Axis(format="%"), scale=alt.Scale(domain=[0, 1])),

y=alt.Y("sede:N", title=None, sort=["Cholula", "Centro", "Angelópolis"]),

).properties(width=180, height=100)

# For now the dashboard only shows the first chart.

tendencia

# Each chart answers one question. No-shows are counted
# against active appointments: scheduled minus canceled with notice.
base = alt.Chart(data).transform_calculate(
    en_pie="datum.agendadas - datum.canceladas"
)
ultima_semana = "time(datum.semana) == time('2026-09-21T00:00:00Z')"

# Weeks start on Monday. We mark every other Monday, in UTC
# (the time zone the dates come in), so they don't shift by a day.
lunes = [
    alt.DateTime(year=2026, month=m, date=d, utc=True)
    for m, d in [(6, 29), (7, 13), (7, 27), (8, 10), (8, 24), (9, 7), (9, 21)]
]

# The 10% target, as a dashed line: horizontal and vertical.
meta_horizontal = base.transform_aggregate(n="count()").mark_rule(strokeDash=[4, 4]).encode(
    y=alt.datum(0.10)
)
meta_vertical = base.transform_aggregate(n="count()").mark_rule(strokeDash=[4, 4]).encode(
    x=alt.datum(0.10)
)

# 1. How is the clinic doing against the target?
linea = base.transform_aggregate(
    inasistencias="sum(inasistencias)", en_pie="sum(en_pie)", groupby=["semana"]
).transform_calculate(
    tasa="datum.inasistencias / datum.en_pie"
).mark_line(point=True).encode(
    x=alt.X("utcyearmonthdate(semana):T", title="Week", axis=alt.Axis(format="%d/%m", values=lunes)),
    y=alt.Y("tasa:Q", title="No-show rate", axis=alt.Axis(format="%")),
)
tendencia = (linea + meta_horizontal).properties(width=440, height=150)

# 2. Which site has the problem this week?
por_sede = base.transform_filter(ultima_semana).transform_aggregate(
    inasistencias="sum(inasistencias)", en_pie="sum(en_pie)", groupby=["sede"]
).transform_calculate(
    tasa="datum.inasistencias / datum.en_pie"
).mark_bar().encode(
    x=alt.X("tasa:Q", title="No-show rate", axis=alt.Axis(format="%")),
    y=alt.Y("sede:N", title=None, sort="-x"),
).properties(width=180, height=100)

# 3. Is there room on the schedule to rebook?
ocupacion = base.transform_filter(ultima_semana).transform_aggregate(
    agendadas="sum(agendadas)", espacios="sum(espacios)", groupby=["sede"]
).transform_calculate(
    ocupacion="datum.agendadas / datum.espacios"
).mark_bar().encode(
    x=alt.X("ocupacion:Q", title="Occupancy", axis=alt.Axis(format="%"), scale=alt.Scale(domain=[0, 1])),
    y=alt.Y("sede:N", title=None, sort=["Cholula", "Centro", "Angelópolis"]),
).properties(width=180, height=100)

# For now the dashboard only shows the first chart.
tendencia

What the chart shows

Initial lab state: one line showing the clinic's no-show rate from June 29 to September 21, 2026, with a dashed 10% target; it ends at 11.5%. The site and occupancy charts are defined in the code but are not displayed yet.

Read your dashboard the way Lucía would on Monday. Top: the clinic is over the target and has been climbing in recent weeks. Bottom left: the problem is Cholula. Bottom right: Cholula has the fullest schedule of the three (92.6%), so there is less room to rebook. In the case, Lucía prioritizes calls there. Whether calls prevent no-shows and how much they help each site is a hypothesis about the intervention; these charts do not prove it.

That last insight is one no single number gave you: it comes from putting two charts that answer two different questions side by side. That's what a dashboard is for.

If you want to keep going, try changing the week in ultima_semana to 2026-08-24 to see what Cholula looked like a month earlier, or add a fourth chart with the average wait by site. Your Maestro can help with the code.

Something to think about

To use it every Monday, define who updates the file and how the latest complete week is selected. This exercise uses a fixed date; it does not set up automatic refresh. When you ask your AI for it in module 4, one of your instructions will be exactly that: the week should always be the latest complete one, and the dashboard should say which week it is.

To turn this lab into the decision dashboard, put the four-metric header and comparisons first, then the sites and their occupancy, and the trend last. Explain why that order helps Lucía before changing more code.

Check yourself: Looking at the dashboard you built, which site would Lucía prioritize in this case, and which two charts support that? Then explain which header is missing and how you would reorder the pieces to follow the decision.

Answer it yourself