Select different data files with Dropdown, and then visualize

Dash Python
1

Hi everyone! I have a question about the Dropdown component.

Currently what I am trying to do is to create a dropdown menu that can link to a folder, and each value in the dropdown menu is linked to one file. Every time there is a file selected, the app will visualize the file accordingly.

However, I am not quite sure how to connect the dropdown menu values to the files, and I have found barely anything online about this.

Any helps or examples will be appreciated. Thanks

2

Hi @yunyihuang
An example is taken from this post did some slight changes.

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

import os
import pandas as pd
import plotly.graph_objects as go

app = dash.Dash(__name__)

pathway = '/app/data sets'

files = [os.path.join(pathway, f) for f in os.listdir(pathway) if os.path.isfile(os.path.join(pathway, f))]

app.layout = html.Div([
    dcc.Dropdown(id='filename',
                 options=[
                     {'label': i, 'value': i} for i in files
                 ],
                 multi=True
                 ),
    dcc.Graph(id='graphs')
])

@app.callback(
    Output(component_id='graphs', component_property='figure'),
    [
        Input('filename', 'value')
    ]
)
def analysis(values):
    traces = []
    if values is not None:
        for x in values:
            df = pd.read_csv(x)
            y = go.Scatter(
                x=df['X'],
                y=df['Y'],
                mode='markers',
                opacity=0.7,
                # name=str(x)),
            )
            traces.append(y)

        return {'data':traces,'layout': go.Layout(title='Dashboard',
                                                xaxis={'title': 'X'},
                                                yaxis={'title': 'Y'})}
    else:
        return {}

if __name__ == '__main__':
    app.run_server(debug=True)

I hope this helps. :slightly_smiling_face:

2 Likes
3

I want to do the same but instead of each CSV file I want to show 24 CSV files data in a group and in the drop-down I want to show the previous 24 CSV files for example- today is Friday if I select Friday it will show me 24 CSV files bar graph, and if I select Thursday it will show previous(yesterday) 24 CSV files bar graph, like this I want to show whole week data in a graph through a dropdown, 24 CSV are there because each hour data is in CSV files.

Do I need to make a list of every 24-hour CSV files which is of length 7?

any suggestion will be a huge help.
thank you