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

Combine three charts into one dashboard with Altair, with the target in view, using the clinic's data.

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.

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%.

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

The chart redraws when you pause typing, or right away with Run. Ctrl+Enter runs it. Tab indents; to leave the editor, press Escape, then Tab.

Ready to run your code.

What the chart shows

Clínica Alba dashboard. On top, the clinic's weekly no-show rate from June 29 to September 21, with the 10% target as a dashed line; it ends at 11.5%. Below, on the left, the rate by site for the latest week: Cholula 17.1%, Centro 10.1%, Angelópolis 9.8%, with the target; on the right, schedule occupancy by site, between 83% and 93%.

Data: citas-clinica, 117 rows

Enter saves a cell and Escape leaves it as it was. Leave a cell empty for a missing value.

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

Run it yourself

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 rebooking there is hard, and confirmation calls, which head off the empty slot before it happens, are worth more there than anywhere else.

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

In real life, this dashboard refreshes on its own every Monday. Here the week is hard-coded so you can see exactly what's being filtered. 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.

Check yourself: Looking at the dashboard you built, which site should Lucía send the confirmation calls to this week, and which two charts tell you?

Answer it yourself