Line chart sum value based on dropdown

hi. I just learning python around 2 weeks ago for my work. I trying to replicate graph from excel and make it on python using plotly express.

i am using to create line chart that have give different value based on dropdown value selected by user.

above is my code.

at the moment. i can view line chart with all data based on customer group, but it dont reflect any changes when user select value in dropdown.

this is the code i use now to view the line chart.

def chart_dua(value_currency, customer_group, product_type):
    dff2 = df[(df['Customer_group'] == customer_group) | (df['Currency.Currency'] == value_currency) | (
                df['Product_Type'] == product_type)]
    line1 = df.groupby('Customer_group')['Sales Amount'].sum()
    line2 = df.groupby('Customer_group')['Cost_Amount'].sum()
    fig2 = px.line(data_frame=dff2, x=df['Customer_group'].unique(), y=[line1,line2], height=400)

    return fig2

If you could provide a small sample from your data then maybe I can run your code and check it.

this is sample of my data

Here you are passing “dff2” as the data_frame but for both x and y values you are using the original “df”. The reason your graph is not updating is because you are not using the data from dff2 in your fig.

I’ve change the type of chart. i am using bar chart and i’ve add 3 chart. i make the dropdown of customer group and product type responsive based on currency dropdown. but i got an error that ErrorType / NoneType because i am using isin. what should i do?

the third chart is also not responding well.

this is the new code… can u have a look and teach me how to fix this?

https://gist.github.com/khairilazizee/9c0a94af475db1fcb7be8063512152bb

The NoneType error is fired as initially when the app is loaded your dropdowns have no value in them so the isin condition checks for None value. You could solve this by checking if the variables holding the dropdown values are not None before creating the df.

Like this:

    if all(v is not None for v in [value_currency, customer_group, product_type]):
        dff = df1[(df1['Customer_group'].isin(customer_group)) & (df1['Currency.Currency'].isin(value_currency)) & (
            df1['Product_Type'].isin(product_type))]
        # print(dff)
        fig = px.histogram(data_frame=dff, x='Currency.Currency', y=['Sales Amount', 'Cost_Amount'], barmode='group',
                           height=400)
        return fig

    else:
        return {
            'layout':{}
        }

And regarding the chart 3 I tried to print the dff3 for your chart 3 and it returns an empty dataframe. It’s due to the incorrect order of inputs to your callback function.
The input variables to the chart_tiga function should be in the same order you write your inputs in the callback.

Your input variables should be in this order:

def chart_tiga(value_currency, customer_group, product_type):

oh… okeh… i will try this solution… thanks…you really help me a lot.

1 Like