Challenge in connecting my data frame from csv into input value

Dash Python
1

So here is the problem statement:

I am trying to build dashboard similar to epic stock ticker example video, but am using the data frame imported from my desktop file now whats the challenge is am not able to understand how to connect it with a search box and even if I connect how to know which column to select.

import pandas as pd

import numpy as np
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

df = pd.DataFrame(pd.read_csv(“Desktop/sale.csv”))
df[“actual”] = df[“sales_made”]/df[“days”]
df[“goal”] = df[“target”]/df[“days”]
dff = df[[“manager”, “emp”, “sale_type”,“week”,“actual”,“goal”]]
dff= dff.set_index(“rpt_week”)
dff = dff[dff[“sale_type”]==‘door_to_door’]

app = dash.Dash()

app.layout = html.Div(children= [
html.H1(‘Performance Dashboard’),

dcc.Input(id='input', value='', type='text'),
html.Div(id='output-graph'),

])

@app.callback(
Output(component_id=‘output-graph’, component_property=‘children’),
[Input(component_id=‘input’, component_property=‘value’)]
)

def update_value(input_data):

return dcc.Graph(
    id = 'example-graph',
          figure = {
              'data' :[
                  { 'x':dff.index , 'y':dff.actual , 'type':'bar' , 'name':input_data},
                  #{ 'x':dff.index , 'y':dff.goal , 'type':'bar' , 'name':'goal'},
                  ],
              'layout': {
                'title': input_data
                  }

              }

    )

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

above is my code, the part of the "def update value " not getting what to put. Please let me know if it’s not clear.
Thank You.

2

Hey
Here is a thought by lpooking at your code, I think you need to break your csv files and add a link to go collect the seperate files from a folder on your machine, like the path should be in the update function, like
def update_value(input_data):
df = pd.DataFrame(pd.read_csv(“Desktop/"+input_data+".csv”))
df.set_index(‘Date’, inplace = True)
return dcc.Graph(
id = ‘example-graph’,
figure = {
‘data’ :[
{ ‘x’:df.Index , ‘y’:df.actual , ‘type’:‘bar’ , ‘name’:input_data},
#{ ‘x’:df.index , ‘y’:df.goal , ‘type’:‘bar’ , ‘name’:‘goal’},
],
‘layout’: {
‘title’: input_data
}

              }

    )

Then you can setup a dropdown as a csv containing the names of all the files you want to visualise. That wa\y you just need to update the csv to add ne names and add more files to that folder. I think this would make your app lighter instead of storing the data in itself and it can discard it once you change what you are visualising. There is another way from your code also but will need to run it first then will comment. But for now try this code above, ps where I set index to date you can change it to your index. also note how I changed the path. That way the name is added of the file you want to visualise.

1 Like
3

If your callback just needs to change the data of the graph, then it should target the figure property of a Graph in your layout, rather than returning a whole new Graph.

Otherwise it looks like you’re close. You just need to work out how to use the input data the user specifies to filter the value of the dataframe. At this point, this is more of question of using Pandas to apply the relevant filtering. It’s not quite clear from your post exactly what this is though. The dataframe should support the filtering without needing to separate out your data into separate csv files though.

Also, it sounds like a Dropdown might be a better than an Input, if the user can only select from a specified number of options, such as column names. You could extract the columns from the dataframe and use this to construct the options for the Dropdown

1 Like
4

Hi Ned,

Thanks for the update, am new to Dash and pandas too. I will try to change it to drop down. Thanks Again

1 Like