Why is my graph not changing when I select it in dropdown? can anyone help me with this. Thanks in advance

Dash Python
1

Here is my code:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import mysql.connector
import pandas as pd
import plotly.graph_objs as px
import matplotlib.pyplot as plt
#import plotly .express as px

Step 1. Launch the application

app = dash.Dash()

Step 2. Import the dataset

df = pd.read_excel("./billingdata.xlsx")

Step 3. Create a plotly figure

trace_1 = px.Scatter(x = df.OVERAGE_ACCOUNTS_PER_CYCLE, y = df[‘CORP_ID’],
name = ‘CORP_ID’,#marker=dict(color=’#ffcdd2’))
line = dict(width = 1,
color = ‘rgb(229, 151, 50)’))

layout = px.Layout(title = ‘Billing cycle’,
hovermode = ‘closest’)
fig = px.Figure(data = [trace_1], layout = layout)

Step 4. Create a Dash layout

df[‘BILLING_CYCLE_START_DATE’] = pd.to_datetime(df.BILLING_CYCLE_START_DATE)
features = df.BILLING_CYCLE_START_DATE
opts = [{‘label’ : i, ‘value’ : i} for i in features]
app.layout = html.Div([
# adding a plot
dcc.Graph(id = ‘plot’, figure = fig),
# dropdown
html.P([

                html.Label("BILLING_CYCLE_START_DATE"),
                dcc.Dropdown(
                             id = 'opt', 
                             options = opts,
                             value = features[0],
                             multi = False)
                    ], style = {'width': '400px',
                                'fontSize' : '20px',
                                'padding-left' : '100px',
                                'display': 'inline-block'})
                  ])

Step 5. Add callback functions

@app.callback(dash.dependencies.Output(‘plot’, ‘figure’),
[dash.dependencies.Input(‘opt’, ‘value’)]
)
def update_figure(X):

#dff = df[df.BILLING_CYCLE_START_DATE==X]
trace_1 = px.Scatter(x = df.OVERAGE_ACCOUNTS_PER_CYCLE, y = df['CORP_ID'],
                 name = 'CORP_ID',#marker=dict(color='#ffcdd2'))
                line = dict(width = 1,
                             color = 'rgb(229, 151, 50)'))

trace_2 = px.Scatter(x = df.OVERAGE_ACCOUNTS_PER_CYCLE, y = df[X],
                    name = str(X),
                    line = dict(width = 2,
                               color = 'rgb(106, 181, 135)'))
fig = px.Figure(data =([trace_1, trace_2]), layout = layout)

return fig.update_traces(mode='markers+lines')

Step 6. Add the server clause

if name == ‘main’:
app.run_server(debug = True)

2

Hi @chandana ,

Could you please edit your post so that your code is properly formatted? It will be much easier for others to look at your code or to try to run it.

You should use this button from the tools panel to insert code snippets:

image
image1610×102 7.41 KB

3

Thank u

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import mysql.connector
import pandas as pd
import plotly.graph_objs as px
import matplotlib.pyplot as plt
#import plotly .express as px
import sqlalchemy as sq
from sqlalchemy.engine import url as sq_url
import pandas as pd

db_connect_url = sq_url.URL(
            drivername='mysql+mysqldb',
            username='root',
            password='**********',
            host='localhost',
            port=3306,
            database="billingcycle",
        )
engine = sq.create_engine(db_connect_url)
df = pd.read_sql_table('billing', engine)


# Step 1. Launch the application
app = dash.Dash()

# Step 2. Import the dataset
#df = pd.read_excel("./billingdata.xlsx") 



# Step 3. Create a plotly figure


trace_1 = px.Scatter(x = df.OVERAGE_ACCOUNTS_PER_CYCLE, y = df.CORP_ID,
                     name = 'BILLING_CYCLE_START_DATE',#marker=dict(color='#ffcdd2'))
                    line = dict(width = 2,
                                 color = 'rgb(229, 151, 50)'))

layout = px.Layout(title = 'Billing cycle',
                   hovermode = 'closest')
fig = px.Figure(data = [trace_1], layout = layout)


# Step 4. Create a Dash layout
features = df.columns[1]
opts = [{'label' : i, 'value' : i} for i in sorted(df.BILLING_CYCLE_START_DATE)]
app.layout = html.Div([
                # adding a plot
                dcc.Graph(id = 'plot', figure = fig),
                # dropdown
                html.P([

                    html.Label("BILLING_CYCLE_START_DATE"),
                    dcc.Dropdown(id = 'opt', 
                                 options = opts,
                                 value = opts[0]['value'])
                        ], style = {'width': '400px',
                                    'fontSize' : '20px',
                                    'padding-left' : '100px',
                                    'display': 'inline-block'})
                      ])

# Step 5. Add callback functions
@app.callback(Output('plot', 'figure'),
             [Input('opt', 'value')])
def update_figure(X):
    trace_2 = px.Scatter(x = df.OVERAGE_ACCOUNTS_PER_CYCLE, y = df.CORP_ID,
                        name = X,
                        line = dict(width = 2,
                                    color = 'rgb(106, 181, 135)'))
    fig = px.Figure(data = [trace_1, trace_2], layout = layout)
    
    return fig.update_traces(mode='markers+lines')

# Step 6. Add the server clause
if __name__ == '__main__':
    app.run_server(debug = True)
4

Is the dropdown option supposed to change something in this callback? It looks like you reference the same data, but only the name of the trace changes in the figure. Should it be something like this?

def update_figure(X):
    rows = df[df.BILLING_CYCLE_START_DATE == X]
    trace_2 = px.Scatter(
        x=rows.OVERAGE_ACCOUNTS_PER_CYCLE, 
        y=rows.CORP_ID,
        name=X,
5

Hello Shouples,

I have updated the changes still my graph is not updating .

newplot (1)
newplot (1)1264×450 41.8 KB