Python Academy · Lesson

Dashboards Concepts

Combine charts into dashboards.

Dashboards Concepts is a free Python Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Python Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

From Charts to Dashboards

A single chart answers one question. A dashboard arranges several related charts together so a viewer can monitor a whole situation at a glance.

Building one means deciding which charts belong together, how to lay them out, and how they relate.

Subplots in Plotly

To place several Plotly charts in one figure, use make_subplots(rows, cols) from plotly.subplots. You then add each trace to a specific cell with fig.add_trace(trace, row=1, col=2).

This is the Plotly equivalent of Matplotlib's subplot grid.

Planning the Grid

Before coding, sketch the grid. Decide how many rows and columns, and what goes in each cell. The arithmetic is the same as any grid layout.

panels = ['Revenue trend', 'Top products', 'Region map', 'Conversion %']
rows, cols = 2, 2
for i, p in enumerate(panels):
    r = i // cols + 1
    c = i % cols + 1
    print('row', r, 'col', c, '->', p)

Mixed Chart Types

A dashboard usually mixes types: a line for trends, a bar for rankings, a number for a key metric. make_subplots can host all of them, and you can set per-cell types with the specs argument (for example a pie needs type='domain').

KPI Cards

Dashboards often start with big single numbers, the KPIs. Plotly's Indicator trace shows a value, optional delta versus a target, and a gauge.

The delta is simply current minus previous.

current = 1280
previous = 1150
delta = current - previous
pct = delta / previous * 100
print('Value:', current)
print('Delta:', '+' + str(delta), '(' + format(pct, '.1f') + '%)')

Shared Titles and Layout

Give the dashboard one overall title with fig.update_layout(title_text='Sales Dashboard'), and per-panel titles via the subplot_titles argument of make_subplots. Consistent layout makes the panels feel like one product.

Dash for Web Dashboards

For interactive web dashboards with dropdowns and filters, Plotly's sister framework Dash is the standard. It pairs Plotly figures with HTML controls and callbacks that update charts when inputs change.

A static figure of subplots is enough for reports; Dash is for live apps.

Callbacks: The Core Idea

A Dash callback maps inputs (like a dropdown value) to outputs (like a chart). When the input changes, the function reruns and returns a new figure. The pattern is input in, figure out.

def update_chart(selected_region):
    data = {'North': [1, 2, 3], 'South': [3, 2, 1]}
    series = data.get(selected_region, [])
    return {'region': selected_region, 'values': series}

print(update_chart('North'))
print(update_chart('South'))

Layout Principles

Good dashboards follow a hierarchy:

Most important KPIs at the top left, where eyes land first
Supporting detail charts below
Consistent colors so a series means the same thing everywhere

Avoid cramming; whitespace aids comprehension.

Performance Awareness

Many charts and large datasets can make a dashboard slow. Aggregate data before plotting, limit the number of points, and only recompute panels whose inputs changed. Snappy dashboards get used; slow ones get abandoned.

Filters and Cross-Filtering

Advanced dashboards let one selection update several charts at once, called cross-filtering. Clicking a region in a map filters the trend and ranking panels to that region.

In Dash this is wired with callbacks; the selected value becomes the input that all dependent charts read.

Quick Check

Test your dashboard concepts.

Recap

You learned how charts become dashboards:

make_subplots(rows, cols) + add_trace(..., row=, col=) for a grid
Mix chart types and lead with KPI Indicator cards
Dash adds interactive controls via input-to-figure callbacks
Follow a visual hierarchy and watch performance

Frequently asked questions

Is the “Dashboards Concepts” lesson free?

Yes — the full text of “Dashboards Concepts” is free to read here on the web, and the Python Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Python Academy course, upgrade to CoddyKit PRO.

What will I learn in “Dashboards Concepts”?

Combine charts into dashboards. You practise Python Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Python Academy?

No prior experience is required. Python Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Dashboards Concepts” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Python Academy lesson?

Yes. Every Python Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Python Academy