📺
dev.to
Building interactive data dashboards can seem intimidating.
Especially if you're unfamiliar with frontend technologies like HTML/CSS/ JS.
, an open-source library that simplifies the process of creating data apps.
In this tutorial, Mariya Sha will guide you through building a stock value dashboard using , and a dataset from , and you’ll see your basic app!
Step 3: Adding User Inputs
To filter data by date, add a date range selector:
CODE
import datetime
dates = [datetime.date(2023, 1, 1), datetime.date(2024, 1, 1)]
with tgb.page("Stock Dashboard"):
# Existing elements...
# Add date range selector
tgb.date_range(
value="{dates}",
label_start="Start Date",
label_end="End Date",
)
Step 4: Dynamic Data Handling with Taipy
Let’s load our dataset and filter it dynamically based on user inputs.
CODE
import pandas as pd
# Load the stock data
stock_data = pd.read_csv("data/sp500_stocks.csv")
def filter_data(state, name, value):
if name == "dates":
start, end = state.dates
filtered_data = stock_data[
(stock_data["Date"] >= str(start)) &
(stock_data["Date"] <= str(end))
]
state.filtered_data = filtered_data
tgb.add_callback("filter_data", filter_data)
Step 5: Visualizing the Data
Finally, let’s plot the data with Plotly:
CODE
import plotly.graph_objects as go
def create_chart(data):
fig = go.Figure()
fig.add_trace(
go.Scatter(
x=data["Date"],
y=data["High"],
name="Stock Value",
mode="lines"
)
)
return fig
with tgb.page("Stock Dashboard"):
# Existing elements...
# Display the chart
tgb.chart(figure="{create_chart(filtered_data)}")
Final Thoughts
And voilà!
You’ve built a stock dashboard with and contribute to their open-source initiatives!
PS: you can watch the video tutorial here.
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR