Plotly Update Button to Filter Dataset

user_18534100 0
Viewed 169

I am brand new to the world of Python and Plotly and have been working on a Capstone project with the following objective: Create an interactive chart that allows the user to view US Vehicle Sales between 2019-2021 that allows the user to view the data by Body Type, Segment, Year, Make/Brand, and Individual Models.

I have learned how to add buttons using Plotly Express, though I have been having issues with making them toggle the way I want them to. Here is a snippet of my code:

    segbar = px.bar(segments, x=segments.Month, y=segments.NumSold, color=segments.NumSold,
color_continuous_scale='inferno', custom_data=[segments.Segment, segments.PrimaryBodyType, segments.Month, segments.Year], barmode='group')
segbar.update_traces(hovertemplate='<b>Segment:</b> %{customdata[0]} %{customdata[1]}<br><b>Units Sold:</b> %{y:,.0f}<br>Date: %{customdata[2]} %{customdata[3]}')


segbar.update_layout(
    updatemenus=[
        dict(
            type="dropdown",
            direction="down",
            bgcolor='Dark Blue',
            buttons=list(
                [
                dict(
                    label="(All)",
                    method="update",
                    args=[{"y": segments.NumSold},
                    {"x": segments.Month}],
         ),
            dict(
                label="2021",
                method="update",
                args=[{"y": segments.loc[segments['Year'] == "2021", "NumSold]},
                      {"x": segments.loc[segments['Year] == "2021", "Month"]}]
            )
            ]),
        ), dict(
            type="dropdown",
            direction="down"
    )
], template='plotly_dark')
segbar.show()

The default view (first button) seems to be working fine, though when I select the other button to filter by rows with a "Year" value of 2021, this is the output:

Chart2021Filtered

plotly python
1 Answers

You are pretty close – you just need to add another set of square brackets around the pd.Series you are passing to "y" and "x" in the args key of the dictionaries. To get the example to work, I had to modify your DataFrame slightly, but this should work with your DataFrame.

from io import StringIO
import pandas as pd
import plotly.express as px

segment_data = StringIO("""Segment|PrimaryBodyType|Month|Year|NumSold|MonthNum(Index)|Compact|
A|SUV|January|2021|254391|0|Compact| 
B|SUV|January|2019|249913|0|Midsize| 
C|SUV|January|2021|248762|0|Midsize| 
D|SUV|January|2020|239102|0|Compact| 
E|SUV|January|2020|233614|0|Compact|
""")

segments = pd.read_csv(segment_data, sep="|")
segments["Year"] = segments["Year"].astype(str)

segbar = px.bar(segments, x=segments.Month, y=segments.NumSold, color=segments.NumSold,
color_continuous_scale='inferno', custom_data=[segments.Segment, segments.PrimaryBodyType, segments.Month, segments.Year], barmode='group')
segbar.update_traces(hovertemplate='<b>Segment:</b> %{customdata[0]} %{customdata[1]}<br><b>Units Sold:</b> %{y:,.0f}<br>Date: %{customdata[2]} %{customdata[3]}')


segbar.update_layout(
    updatemenus=[
        dict(
            type="dropdown",
            direction="down",
            bgcolor='Dark Blue',
            buttons=list(
                [
                dict(
                    label="(All)",
                    method="update",
                    args=[{"y": [segments.NumSold]},
                    {"x": [segments.Month]}],
         ),
            dict(
                label="2021",
                method="update",
                args=[{"y": [segments.loc[segments['Year'] == "2021", "NumSold"]]},
                      {"x": [segments.loc[segments['Year'] == "2021", "Month"]]}]
            )
            ]),
        ), dict(
            type="dropdown",
            direction="down"
    )
], template='plotly_dark')
segbar.show()

enter image description here

user_53270680
Related