This is the project that ties all your PyScript skills together. In this guide, you’ll learn how to create a PyScript Data Dashboard. We will build a single HTML file that:
- Fetches live data from a public API.
- Analyzes it with Pandas.
- Plots it with Matplotlib.
This is a complete, serverless data dashboard.
Step 1: The HTML Head (The Setup)
We need to tell PyScript to load pandas and matplotlib.
<head>
<link rel="stylesheet" href="https.pyscript.net/latest/pyscript.css" />
<script defer src="https.pyscript.net/latest/pyscript.js"></script>
<py-env>
- pandas
- matplotlib
</py-env>
</head>Step 2: The HTML Body (The UI)
We need a “Run” button and divs to hold our plot and our table.
<body> <h1>Live Bitcoin Price Dashboard</h1> <button id="run-btn">Fetch & Plot Data</button> <h2>Live Plot:</h2> <div id="plot-output"></div> <h2>Raw Data:</h2> <div id="table-output"></div> </body>
Step 3: The py-script (The Logic)
This is the main Python code. It will fetch Bitcoin price history, plot it, and show the raw data.
<py-script>
import asyncio
import pandas as pd
import matplotlib.pyplot as plt
from pyodide.http import pyfetch
from pyscript import document
# This is the function our button will call
async def run_dashboard(event):
# 1. Fetch data from the API
url = "https.api.coindesk.com/v1/bpi/historical/close.json"
response = await pyfetch(url)
data = await response.json()
# 2. Analyze with Pandas
# The data is in data['bpi']
df = pd.DataFrame(data['bpi'].items(), columns=["date", "price"])
df['date'] = pd.to_datetime(df['date'])
df = df.set_index('date')
# 3. Plot with Matplotlib
fig, ax = plt.subplots()
df.plot(ax=ax, title="Bitcoin Price (Last 30 Days)", legend=None)
ax.set_ylabel("Price (USD)")
# 4. Render the plot and table to the page
document.getElementById("plot-output").innerHTML = "" # Clear "Loading"
document.getElementById("table-output").innerHTML = ""
pyscript.write("plot-output", fig)
pyscript.write("table-output", df.head().to_html())
# Link the button to our async function
run_button = document.getElementById("run-btn")
run_button.addEventListener("click", asyncio.ensure_future(run_dashboard))
</py-script>You now have a complete, interactive dashboard in a single HTML file!
Key Takeaways
- The article showcases how to build a PyScript Data Dashboard using a single HTML file.
- It fetches live data from a public API, analyses it with Pandas, and plots it using Matplotlib.
- Step 1 involves setting up the HTML head to load required libraries.
- Step 2 focuses on creating the UI with a ‘Run’ button and div containers for data display.
- Step 3 contains the main Python code to fetch Bitcoin price history and display it interactively.
