How to plot multiple .csv files in a single graph on a dashboard

Hi All,

I have a dropdown-driven dashboard for plotting csv file data. Apart from individual cvs plots, I have to plot a trend chart combined for all the .csv files present in a directory(using only the selected columns for the .csv files. Note: All csv files have same columns, different values.) using plotly express, and add it to this same dashboard. Plotting them and then integrating with the existing dashboard is where I am stuck.

The code has two dropdown,

  • First is multi-selection: For selecting the files to be plotted
  • Second is single-selection: For column to be considered for plotting

Below is my sample code:-

import dash
from dash import dcc, Input, Output, html, dash_table
import plotly.express as px
import pandas as pd
import os
# import plotly
import plotly.graph_objects as go


# ======================== Dash App
app = dash.Dash( __name__ )

# ======================== Getting input of directory and Latest filename
PATH = str( input( "Enter Full file path" ) )  # Use your path
# LatestFile = str( input( "Enter Full file Name" ) )  # Use your latest filename

### Fetch all files in path
fileNames = os.listdir( PATH )

### Filter file name list for files ending with .csv
fileNames = [file for file in fileNames if '.csv' in file]

print( fileNames )


# ======================== App Layout
app.layout = html.Div( [
    html.H1( 'Trend Analytics Dashboard', style={'text-align': 'center', 'background-color': '#ede9e8'} ),
    html.Div( [
            dcc.Dropdown( id='DropDown_FileName',
                          options=[
                              {'label': i, 'value': i} for i in fileNames
                          ],
                          # value=fileNames,
                          placeholder='Select Files for Trend Analysis',
                          multi=True,
                          clearable=False ),
                    ] ),
    html.Div( [
        dcc.RadioItems( id='DropDown_Value',
                      options=[
                          {'label': 'Average', 'value': 'Average'},  {'label': 'Samples', 'value': 'Samples'},
                          {'label': 'Throughput', 'value': 'Throughput'}, {'label': 'Comb_wgt', 'value': 'Comb_wgt'}
                      ],
                      value='Average',
                      #placeholder='Select a value',
                      # multi=False,
                      # clearable=False
                      ),
            ] ),

    html.Div( [
        dcc.Graph( id='TrendChart' ),
    ] ),


] )


@app.callback(
    Output( 'TrendChart', 'figure' ),
    Input( 'DropDown_FileName', 'value' ), Input( 'DropDown_Value', 'value' )
)
def update_figure(DropDown_FileName, DropDown_Value):
    print(DropDown_FileName)
    print(type(DropDown_FileName))
    for file in DropDown_FileName:
        df_comb = pd.read_csv(PATH + file)
        df_comb['Comb_wgt'] = df_comb.Samples * df_comb.Average
        df_comb.rename( columns={'Label': 'Request'}, inplace=True )
        df_comb = (df_comb.sort_values( by='Request', ascending=True ))
        df_comb['Average'] = df_comb['Average']/1000
        print(df_comb)
        TrendChart = px.bar(data_frame=df_comb, x=df_comb['Request'], y=df_comb[DropDown_Value],
            color='Request',
            title=" Trend Analysis Graph by"+DropDown_Value,
            text=df_comb[DropDown_Value],
            labels={'Request': 'Request', DropDown_Value: DropDown_Value},
        ).update_traces(textposition='outside')

        return TrendChart


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

With the above code, the for loop gets stuck after the first csv file itself. Graph is plotted for just the first file only, while other files are not even read. I checked the return type for “DropDown_FileName”, and its coming as list, also the radio selection is working fine.
Somehow the for loop is not working properly and the graph is not getting updated.

Objective is to have data from all csv file present on the same graph for trend analysis that is to say, just update the graph without deleting the previous plots

Thank you in advance.

Does this help?

Hi @AIMPED,

Thank you for an early reply.
I have modified my code and have added two dropdowns, one as multiple selection=True and other as multiple selection=False or single selection only.

I checked the link you shared, and took the same approach as suggested in the link by modifying my callback function as below:

@app.callback([
    Output( 'TrendChart', 'extendData' )],
    [Input( 'DropDown_FileName', 'value' ), Input( 'DropDown_Value', 'value' )]

Both mine and the one using above callback, make the code get stuck post reading first csv file. Also no graph is getting plotted.
Can we look into the code so as to find what I am missing !

Hi @atharvakatre, @chriddyp, @alex_01, @AIMPED

Guys, I have looped you people in for my question as in many queries on plotly community, I could see you all have given effective solutions. Kindly go through the thread and please let me know the solution.

I have updated code as below:
I changed the3 indentation of return statement.

With above adjusting the return statement of my function, I am able to get the plot for the last file that user selects from the dropdown. For previous file selection, no plotting is preserved, data is lost. Plot shows just the data from last selected file only.

Also I used “Dash-extendable-graph” with “extendData” as output type. Only the last file gets read from the selection, but no graph is plotted even for that file data.

The actual problem is that previous data is not preserved and with each new file that is selected, the plot reflects only the latest data on graph.

Please look into this.