Graph_Update with two dropdown with multiple selection using excel data and dash python

plotly.js
1

Hello I am new to dash python and I am trying to update a graph in dash using an excel with data. I have 2 drop down and an excel document with different sheets for each drop down. I couldn’t manage yet to select a value from drop down and to charge that data into the table( I have also a table before the graph) and plot values into the graph.
Please find attached my code here:

import dash
import dash_auth
import dash_core_components as dcc
import dash_html_components as html
import plotly
import dash_daq as daq
import os
import random
import pandas as pd
import plotly.graph_objs as go
from collections import deque
import psycopg2
from dash.dependencies import Output, Input

DB_NAME = “LicentaTest”
DB_USER = “postgres”
DB_PASS = “admin”
DB_HOST = “localhost”
DB_PORT = “5433”

VALID_USERNAME_PASSWORD_PAIRS = [
[‘admin1’, ‘admin’]
]

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)
auth = dash_auth.BasicAuth(
app,
VALID_USERNAME_PASSWORD_PAIRS
)

df = pd.read_excel(‘UploadData.xlsx’, sheet_name=‘Total’)

def generate_table(dataframe, max_rows=13):
return html.Table(
# Header
[html.Tr([html.Th(col) for col in dataframe.columns])] +

    # Body
    [html.Tr([
        html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
    ]) for i in range(min(len(dataframe), max_rows))]
)

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
html.H1(‘Electrica SDEE Transilvania SUD SA’),
html.H4(‘Select the branch:’),
dcc.Dropdown(
id=‘dropdown’,
options=[{‘label’: i, ‘value’: i} for i in [‘ALBA’, ‘BRASOV’, ‘COVASNA’, ‘HARGHITA’, ‘MURES’, ‘SIBIU’, ‘TOTAL’]],
value=’’,
placeholder = ‘Select branch’
#multi = True
),
html.H4(‘Select the year:’),
dcc.Dropdown(
id=‘dropdown1’,
options=[{‘label’: i, ‘value’: i} for i in [‘2012’, ‘2013’, ‘2014’, ‘2015’, ‘2016’, ‘2017’, ‘2018’, ‘ALL’]],
value=’’,
placeholder = ‘Select year’
),

html.Br(),
html.Button('OK', id='submit-form'),
html.Br(),

html.Div(children=[
html.H4(children='Own Technological Consumption'),
generate_table(df),
]),

html.Br(),

html.Br(),
html.Br(),

dcc.Graph(id='graph')],

 className='container')

@app.callback(
dash.dependencies.Output(‘graph’, ‘figure’),
[dash.dependencies.Input(‘dropdown’, ‘value’)])

def update_graph1(dropdown_value):

df = pd.read_excel('UploadData.xlsx', sheet_name='Total')


X1 = df.Date.values
Y1 = df.CPT.values

data = plotly.graph_objs.Scatter(
    x=X1,
    y=Y1,
    name='Graph',
    mode='lines+markers'
)

return {
     'data': [data], 'layout' : go.Layout(xaxis=dict(range=[min(X1),max(X1)]),
    yaxis=dict(range=[min(Y1),max(Y1)]),
    )
}

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

I expect, when select the value ‘Alba’ from drop down and year 2015 to show me on table all the values related to this and to plot the CPT function of data.

2

Best for #dash or #api:python