Simple Dashboards

What is a Dashboard?

A dashboard shows multiple charts together:

Compare different views
Tell a complete story
One page, many insights

Using Subplots

code.py

from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(rows=1, cols=2)

fig.add_trace(go.Bar(x=['A', 'B', 'C'], y=[10, 20, 15]), row=1, col=1)
fig.add_trace(go.Scatter(x=['A', 'B', 'C'], y=[10, 20, 15]), row=1, col=2)

fig.show()

Two charts side by side!

2x2 Grid

code.py

fig = make_subplots(rows=2, cols=2,
                    subplot_titles=['Sales', 'Profit', 'Growth', 'Market'])

fig.add_trace(go.Bar(x=['Q1', 'Q2'], y=[100, 120]), row=1, col=1)
fig.add_trace(go.Scatter(x=['Q1', 'Q2'], y=[20, 25]), row=1, col=2)
fig.add_trace(go.Bar(x=['Q1', 'Q2'], y=[10, 15]), row=2, col=1)
fig.add_trace(go.Pie(labels=['A', 'B'], values=[60, 40]), row=2, col=2)

fig.update_layout(height=600, title_text='Company Dashboard')
fig.show()

Different Chart Sizes

code.py

fig = make_subplots(rows=2, cols=2,
                    specs=[[{'colspan': 2}, None],
                           [{}, {}]],
                    subplot_titles=['Main Chart', 'Left', 'Right'])

fig.add_trace(go.Scatter(x=[1, 2, 3], y=[4, 5, 6]), row=1, col=1)
fig.add_trace(go.Bar(x=['A', 'B'], y=[10, 20]), row=2, col=1)
fig.add_trace(go.Bar(x=['C', 'D'], y=[15, 25]), row=2, col=2)

fig.show()

First chart spans full width!

Adding Pie Chart

code.py

fig = make_subplots(rows=1, cols=2,
                    specs=[[{'type': 'xy'}, {'type': 'domain'}]])

fig.add_trace(go.Bar(x=['A', 'B', 'C'], y=[10, 20, 15]), row=1, col=1)
fig.add_trace(go.Pie(labels=['X', 'Y', 'Z'], values=[30, 40, 30]), row=1, col=2)

fig.show()

Use type='domain' for pie charts!

Shared Axes

code.py

fig = make_subplots(rows=2, cols=1, shared_xaxes=True)

fig.add_trace(go.Scatter(x=[1, 2, 3], y=[10, 20, 15], name='Sales'), row=1, col=1)
fig.add_trace(go.Bar(x=[1, 2, 3], y=[5, 10, 8], name='Profit'), row=2, col=1)

fig.show()

Zooming one chart zooms both!

Custom Spacing

code.py

fig = make_subplots(rows=2, cols=2,
                    horizontal_spacing=0.1,
                    vertical_spacing=0.15)

# Add your traces...
fig.show()

Complete Dashboard Example

code.py

from plotly.subplots import make_subplots
import plotly.graph_objects as go
import pandas as pd

# Sample data
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
sales = [100, 120, 115, 140, 160, 180]
profit = [20, 25, 22, 30, 35, 40]
regions = ['North', 'South', 'East', 'West']
region_sales = [300, 250, 200, 350]

# Create dashboard
fig = make_subplots(
    rows=2, cols=2,
    specs=[[{'colspan': 2}, None],
           [{'type': 'xy'}, {'type': 'domain'}]],
    subplot_titles=['Monthly Trend', 'Profit by Month', 'Sales by Region']
)

# Line chart (top, full width)
fig.add_trace(go.Scatter(x=months, y=sales, name='Sales', mode='lines+markers'),
              row=1, col=1)

# Bar chart (bottom left)
fig.add_trace(go.Bar(x=months, y=profit, name='Profit', marker_color='green'),
              row=2, col=1)

# Pie chart (bottom right)
fig.add_trace(go.Pie(labels=regions, values=region_sales, name='Region'),
              row=2, col=2)

fig.update_layout(
    height=600,
    title_text='Sales Dashboard',
    showlegend=True
)

fig.show()

Dash for Complex Dashboards

For web dashboards with filters:

code.py

# pip install dash

from dash import Dash, html, dcc
import plotly.express as px
import pandas as pd

app = Dash(__name__)

df = pd.DataFrame({
    'Product': ['A', 'B', 'C'],
    'Sales': [100, 150, 80]
})

fig = px.bar(df, x='Product', y='Sales')

app.layout = html.Div([
    html.H1('My Dashboard'),
    dcc.Graph(figure=fig)
])

# app.run_server(debug=True)

Dash creates interactive web apps!

Key Points

make_subplots() creates grid
rows and cols set grid size
specs for custom layouts
colspan makes chart span columns
type='domain' for pie charts
shared_xaxes links chart zoom
Use Dash for web dashboards

What's Next?

Learn to save and export your Plotly charts.