In this tutorial, we create an advanced multi-page interactive dashboard using panelThrough each component of the implementation, we explore generating synthetic data, applying rich filters, visualizing dynamic time-series trends, comparing segments and regions, and even simulating live KPI updates, We design the system step by step so we can really understand how each widget, callback, and plotting function comes together to create a seamless, responsive analytics experience, check it out full code here,
import sys, subprocess
def install_deps():
pkgs = ("panel", "hvplot", "pandas", "numpy", "bokeh")
subprocess.check_call((sys.executable, "-m", "pip", "install", "-q") + pkgs)
try:
import panel as pn
import hvplot.pandas
import pandas as pd
import numpy as np
except ImportError:
install_deps()
import panel as pn
import hvplot.pandas
import pandas as pd
import numpy as np
pn.extension()
rng = np.random.default_rng(42)
dates = pd.date_range("2024-01-01", periods=365, freq="D")
segments = ("A", "B", "C")
regions = ("North", "South", "East", "West")
base = pd.DataFrame(
{
"date": np.tile(dates, len(segments) * len(regions)),
"segment": np.repeat(segments, len(dates) * len(regions)),
"region": np.repeat(np.tile(regions, len(segments)), len(dates)),
}
)
base("traffic") = (
100
+ 40 * np.sin(2 * np.pi * base("date").dt.dayofyear / 365)
+ rng.normal(0, 15, len(base))
)
trend = {"A": 1.0, "B": 1.5, "C": 2.0}
base("traffic") *= base("segment").map(trend)
base("conversions") = (base("traffic") * rng.uniform(0.01, 0.05, len(base))).astype(int)
base("revenue") = base("conversions") * rng.uniform(20, 60, len(base))
df = base.reset_index(drop=True)We install all the necessary dependencies and load Panel, hvPlot, Pandas, and NumPy so that the dashboard runs smoothly in Colab. We generate synthetic time-series data of a full year across different segments and regions, providing a rich dataset for exploration. By the end of this block, we will have a clean, easy-to-use dataframe for all subsequent visualizations. check it out full code here,
segment_sel = pn.widgets.CheckBoxGroup(name="Segment", value=segments(:2), options=segments, inline=True)
region_sel = pn.widgets.MultiChoice(name="Region", value=("North"), options=regions)
metric_sel = pn.widgets.Select(name="Metric", value="traffic", options=("traffic", "conversions", "revenue"))
date_range = pn.widgets.DateRangeSlider(
name="Date Range",
start=df("date").min(),
end=df("date").max(),
value=(df("date").min(), df("date").max()),
)
smooth_slider = pn.widgets.IntSlider(name="Rolling Window (days)", start=1, end=30, value=7)
def filtered_df(segment, region, drange):
d1, d2 = drange
mask = (
df("segment").isin(segment)
& df("region").isin(region or regions)
& (df("date") >= d1)
& (df("date") <= d2)
)
sub = df(mask).copy()
if sub.empty:
return df.iloc(:0)
return sub
@pn.depends(segment_sel, region_sel, metric_sel, smooth_slider, date_range)
def timeseries_plot(segment, region, metric, window, drange):
data = filtered_df(segment, region, drange)
if data.empty:
return pn.pane.Markdown("### No data for current filters")
grouped = data.sort_values("date").groupby("date")(metric).sum()
line = grouped.hvplot.line(title=f"{metric.title()} over time", ylabel=metric.title())
if window > 1:
smooth = grouped.rolling(window).mean().hvplot.line(line_width=3, alpha=0.6)
return (line * smooth).opts(legend_position="top_left")
return lineWe create interactive widgets and filtering logic that controls the entire dashboard. We connect the time-series plot to the widget using reactive @pn.depends, allowing us to change segments, regions, metrics, date ranges, and smooth windows on the fly. With this setup, we can easily change the perspective and see the effects in real time. check it out full code here,
@pn.depends(segment_sel, region_sel, metric_sel, date_range)
def segment_bar(segment, region, metric, drange):
data = filtered_df(segment, region, drange)
if data.empty:
return pn.pane.Markdown("### No data to aggregate")
agg = data.groupby("segment")(metric).sum().sort_values(ascending=False)
return agg.hvplot.bar(title=f"{metric.title()} by Segment", yaxis=None)
@pn.depends(segment_sel, region_sel, metric_sel, date_range)
def region_heatmap(segment, region, metric, drange):
data = filtered_df(segment, region, drange)
if data.empty:
return pn.pane.Markdown("### No data to aggregate")
pivot = data.pivot_table(index="segment", columns="region", values=metric, aggfunc="sum")
return pivot.hvplot.heatmap(title=f"{metric.title()} Heatmap", clabel=metric.title())We create additional visualization layers: a segment-level bar chart and a region-segment heatmap. We let these charts respond to the same global filters, so they automatically update whenever we make a selection. This gives us in-depth analysis of patterns in categories without writing unnecessary code. check it out full code here,
kpi_source = df.copy()
kpi_idx = (0)
def compute_kpi(slice_df):
if slice_df.empty:
return 0, 0, 0
total_rev = slice_df("revenue").sum()
avg_conv = slice_df("conversions").mean()
cr = (slice_df("conversions").sum() / slice_df("traffic").sum()) * 100
return total_rev, avg_conv, cr
kpi_value = pn.indicators.Number(name="Total Revenue (window)", value=0, format="$0,0")
conv_value = pn.indicators.Number(name="Avg Conversions", value=0, format="0.0")
cr_value = pn.indicators.Number(name="Conversion Rate", value=0, format="0.00%")
def update_kpis():
step = 200
start = kpi_idx(0)
end = start + step
if start >= len(kpi_source):
kpi_idx(0) = 0
start, end = 0, step
window_df = kpi_source.iloc(start:end)
kpi_idx(0) = end
total_rev, avg_conv, cr = compute_kpi(window_df)
kpi_value.value = total_rev
conv_value.value = avg_conv
cr_value.value = cr / 100
pn.state.add_periodic_callback(update_kpis, period=1000, start=True)We simulate a rolling stream of KPIs that update every second, creating a live-dashboard experience. We calculate total revenue, average conversion and conversion rate inside a sliding window and push the values to the numerical indicators of the panel. This allows us to see how the metrics constantly evolve, just like a real monitoring system. check it out full code here,
controls = pn.WidgetBox(
"### Global Controls",
segment_sel,
region_sel,
metric_sel,
date_range,
smooth_slider,
sizing_mode="stretch_width",
)
page_overview = pn.Column(
pn.pane.Markdown("## Overview: Filtered Time Series"),
controls,
timeseries_plot,
)
page_insights = pn.Column(
pn.pane.Markdown("## Segment & Region Insights"),
pn.Row(segment_bar, region_heatmap),
)
page_live = pn.Column(
pn.pane.Markdown("## Live KPI Window (simulated streaming)"),
pn.Row(kpi_value, conv_value, cr_value),
)
dashboard = pn.Tabs(
("Overview", page_overview),
("Insights", page_insights),
("Live KPIs", page_live),
)
dashboard
We assemble all the components into a clean multi-page layout using tabs. We organize the dashboard into an overview page, an insights page, and a live-KPI page, making navigation simple and intuitive. With this structure, we get a sophisticated, interactive analytics application that is ready to run directly in Google Colab.
In conclusion, we see how seamlessly we can combine panel widgets, HVplot visualizations, and periodic callbacks to create a powerful analytics dashboard. We appreciate how each module, from filtering logic to bar charts to live KPI streams, fit together to create a cohesive multi-page interface that runs seamlessly. We end up with a complete, interactive system that we can extend into real-world reporting, experimentation, or production-grade dashboards.
check it out full code hereFeel free to check us out GitHub page for tutorials, code, and notebooksAlso, feel free to follow us Twitter And don’t forget to join us 100k+ ml subreddit and subscribe our newsletterwait! Are you on Telegram? Now you can also connect with us on Telegram.
Asif Razzaq Marktechpost Media Inc. Is the CEO of. As a visionary entrepreneur and engineer, Asif is committed to harnessing the potential of Artificial Intelligence for social good. Their most recent endeavor is the launch of MarketTechPost, an Artificial Intelligence media platform, known for its in-depth coverage of Machine Learning and Deep Learning news that is technically robust and easily understood by a wide audience. The platform boasts of over 2 million monthly views, which shows its popularity among the audience.
