3 - Charts
In this part we will embed a Plotly map figure in our application.
For this purpose, we will use the generate_map
function defined
here
to return a Plotly map figure.
Using the same code as the previous steps, we can import the function and initialize the chart:
from chart import generate_map
data = pd.read_csv("data.csv")
map_fig = generate_map(data)
We can now add the map to the page by replacing our previous chart and table with:
tgb.html("br")
with tgb.layout(columns="2 3"):
tgb.chart(
data="{chart_data}",
x="State",
y="Sales",
type="bar",
layout="{layout}",
)
tgb.chart(figure="{map_fig}")
tgb.html("br")
tgb.table(data="{data}")
<br />
<|layout|columns=2 3|
<|{chart_data}|chart|x=State|y=Sales|type=bar|layout={layout}|>
<|chart|figure={map_fig}|>
|>
<br />
<|{data}|table|>
We should now update the callback function to refresh the map when filters are applied:
def apply_changes(state):
new_data = data[
(
pd.to_datetime(data["Order Date"], format="%d/%m/%Y")
>= pd.to_datetime(state.start_date)
)
& (
pd.to_datetime(data["Order Date"], format="%d/%m/%Y")
<= pd.to_datetime(state.end_date)
)
]
new_data = new_data[new_data["Category"] == state.selected_category]
new_data = new_data[new_data["Sub-Category"] == state.selected_subcategory]
state.data = new_data
state.chart_data = (
state.data.groupby("State")["Sales"]
.sum()
.sort_values(ascending=False)
.head(10)
.reset_index()
)
state.layout = {
"yaxis": {"title": "Revenue (USD)"},
"title": f"Sales by State for {state.selected_category} - {state.selected_subcategory}",
}
state.map_fig = generate_map(state.data)