3 - Charts

In this part we will embed a Plotly map figure in our application.

Download the code

Map embedded in application

For this purpose, we will use the generate_map function defined here to return a Plotly map figure.

Plotly Map

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)