Input csv with upload button

I’m getting confuse how i can add Upload button for csv file and when ever i want i can refresh the new data by clicking on upload button and load new csv

Code:

Graph V1.2

Updated by Haider Imtiaz

pip install plotly

pip install dash

pip install pandas

from tkinter.ttk import Style

import pandas as pd

import plotly.express as px

import webbrowser

from threading import Timer

import sys

from dash import Dash, dcc, html

from dash.dependencies import Input, Output

import math

def Cal_Speed(a, t):

d = (a * math.pow(t, 2))/2

v = (2*a)*d

v = math.sqrt(v)

return v

if True:

filename = input("Enter filename with extension: ")

df = pd.read_csv(str(filename))

columns = pd.read_csv(str(filename), nrows=1).columns.tolist()

col2 = [1]

col = [1]

for x in columns:

    col2.append(df[x].to_list())

kl = 0

t = -1

while kl < len(col2[3])-1:

    if col2[3][kl] < 0:

        t = kl

        break

    kl+=1

for x in columns:

    data = df[x].to_list()

    k = 0

    d = []

    while k < int(t):

        d.append(data[k])

        k+=1

    col.append(d)

flight_Time = max(col[2])

max_aceleration = min(col[4])

m_ace_index = col[4].index(max_aceleration)

max_ace_time = col[1][m_ace_index]

max_altitude = min(col[3])

m_alt_index = col[3].index(max_altitude)

max_alt_time = col[1][m_alt_index]

# finding speed using distance / time

speed = []

d = 0

for x in col[3]:

    if col[1][d] != 0:

        speed.append(Cal_Speed(x, col[1][d]))

    d +=1

t_speed = round(max(speed), 2)

i_speed = speed.index(max(speed))

time_speed = col[1][int(i_speed)]

app = Dash(name, title=‘Rockit Graph’)

tabs_styles = {

'height': '30px',

}

tab_style = {

'padding': '6px',

'font-family': 'Arial, Helvetica, sans-serif',

'font-size': '12px',

'fontWeight': 'normal'

}

tab_selected_style = {

'padding': '6px',

'border-style': 'solid',

'border-color': 'grey',

'font-family': 'Arial, Helvetica, sans-serif',

'font-size': '12px',

'fontWeight': 'bold'

}

app.layout = html.Div([

html.Div([

        dcc.Tabs(id="tabs-example-graph", value='tab-1-example-graph', children=[

    dcc.Tab(label="Altitude (m)", value='tab-1-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Acceleration (g)", value='tab-2-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Filtered altitude (m)", value='tab-3-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Perpendicular acceleration (g)", value='tab-4-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Temperature (C)", value='tab-5-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Flight Summary", value='tab-6-example-graph',

            style=tab_style, selected_style=tab_selected_style)

]),

html.Div(id='tabs-content-example-graph')

]),

html.Div([

   dcc.Upload(id="upload-data", children = html.Button('Upload File')),



], style={

    'width': '100%',

    'height': '60px',

    'lineHeight': '60px',

    'borderWidth': '1px',

    'borderStyle': 'dashed',

    'borderRadius': '5px',

    'textAlign': 'center'

})

])

@app.callback(Output(‘tabs-content-example-graph’, ‘children’),

          Input('tabs-example-graph', 'value'))

def render_content(tab):

if tab == 'tab-1-example-graph':

    return html.Div([

        dcc.Graph(

            id='graph-1-tabs',

            figure={

                'data': [{

                    'x': col[1],

                    'y': col[2],

                    'type': 'line'

                }], "layout": {

                    "title": {

                        'text': columns[1] + ' vs Time',

                        'font': {

                            'family': 'Arial, Helvetica, sans-serif',

                            'size': '15',

                            'weight': 'bold'

                        },

                    },

                    "height": 620,  # px

                    'xaxis': {

                        'title': columns[0]

                    },

                    'yaxis':{

                        'title': columns[1],

                        'fontWeight': 'bold'

                    }

                },

            }

        )

    ])

elif tab == 'tab-2-example-graph':

    return html.Div([

        dcc.Graph(

            id='graph-2-tabs',

            figure={

                'data': [{

                    'x': col[1],

                    'y': col[3],

                    'type': 'line'

                }],

                "layout": {

                    "title": columns[2] + ' vs Time',

                    "height": 620,  # px

                    'xaxis': {

                        'title': columns[0]

                    },

                    'yaxis':{

                        'title': columns[2]

                    }

                },

            }

        )

    ])

elif tab == 'tab-3-example-graph':

    return html.Div([

        dcc.Graph(

            id='graph-3-tabs',

            figure={

                'data': [{

                    'x': col[1],

                    'y': col[4],

                    'type': 'line'

                }],

                "layout": {

                    "title": columns[3] + ' vs Time',

                    "height": 620,  # px

                    'xaxis': {

                        'title': columns[0]

                    },

                    'yaxis':{

                        'title': columns[3]

                    }

                },

            }

        )

    ])

elif tab == 'tab-4-example-graph':

    return html.Div([

        dcc.Graph(

            id='graph-4-tabs',

            figure={

                'data': [{

                    'x': col[1],

                    'y': col[5],

                    'type': 'line'

                }],

                "layout": {

                    "title": columns[4] + ' vs Time',

                    "height": 620,  # px

                    'xaxis': {

                        'title': columns[0]

                    },

                    'yaxis':{

                        'title': columns[4]

                    }

                },

            }

        )

    ])

elif tab == 'tab-5-example-graph':

    return html.Div([

        dcc.Graph(

            id='graph-4-tabs',

            figure={

                'data': [{

                    'x': col[1],

                    'y': col[6],

                    'type': 'line'

                }],

                "layout": {

                    "title": columns[5] + ' vs Time',

                    "height": 620,  # px

                    'xaxis': {

                        'title': columns[0]

                    },

                    'yaxis':{

                        'title': columns[5]

                    }

                },

            }

        )

    ])

elif tab == 'tab-6-example-graph':

    return html.Div([

        html.Div([

                html.H1("Flight Summary")

        ],

       

                    style = {

            'text-align' : 'center'

        },),

        html.Div([

            html.P(f"Total Flight Time:                         {flight_Time} m")

        ],

        style = {

            'font-size': '26px',

            'white-space': 'pre',

            'margin-left' : '50px',

            "margin-top" : '80px'

        },

        ),

        html.Div([

            html.P(f"Maximum altitude:                       {max_altitude} m        reached at      {max_alt_time} sec")

        ],

                    style = {

            'font-size': '26px',

            'white-space': 'pre',

            'margin-left' : '50px',

            "margin-top" : '5px'

        },),

        html.Div([

            html.P(f"Maximum Acceleration:               {max_aceleration} m/s/s     reached at      {max_ace_time} sec")

        ],             style = {

            'font-size': '26px',

            'white-space': 'pre',

            'margin-left' : '50px',

            "margin-top" : '5px'

        },),

        html.Div([

            html.P(f"Maximum Speed:                         {t_speed} m/s          reached at      {time_speed} sec")

        ],             style = {

            'font-size': '26px',

            'white-space': 'pre',

            'margin-left' : '50px',

            'margin-top' : '5px'

        },)

    ])

port = 8009

def open_browser():

webbrowser.open("http://localhost:{}".format(port))

if name == ‘main’:

Timer(1, open_browser).start()

app.run_server(port=port, debug=True, use_reloader=True)

Hello @haider1224

I give a litte format you code and pase like formated code in order that we can reproduce your error.

from tkinter.ttk import Style
import pandas as pd
import plotly.express as px
import webbrowser
from threading import Timer
import sys
from dash import Dash, dcc, html
from dash.dependencies import Input, Output
import math

def Cal_Speed(a, t):

    d = (a * math.pow(t, 2))/2

    v = (2*a)*d

    v = math.sqrt(v)

    return v

if True:

    filename = input("Enter filename with extension: ") 

  
    df = pd.read_csv(str(filename))

    columns = pd.read_csv(str(filename), nrows=1).columns.tolist()


    col2 = [1]

    col = [1]

    for x in columns:

        col2.append(df[x].to_list())

    kl = 0

    t = -1

    while kl < len(col2[3])-1:

        if col2[3][kl] < 0:

            t = kl

            break

        kl+=1

    for x in columns:

        data = df[x].to_list()

        k = 0

        d = []

        while k < int(t):

            d.append(data[k])

            k+=1

            col.append(d)

    flight_Time = max(col[2])

    max_aceleration = min(col[4])

    m_ace_index = col[4].index(max_aceleration)

    max_ace_time = col[1][m_ace_index]

    max_altitude = min(col[3])

    m_alt_index = col[3].index(max_altitude)

    max_alt_time = col[1][m_alt_index]

    # finding speed using distance / time

    speed = []

    d = 0

    for x in col[3]:

        if col[1][d] != 0:

            speed.append(Cal_Speed(x, col[1][d]))

        d +=1

    t_speed = round(max(speed), 2)

    i_speed = speed.index(max(speed))

    time_speed = col[1][int(i_speed)]
    app = Dash(name, title='Rockit Graph')

    tabs_styles = {

    'height': '30px',
    }

    tab_style = {

    'padding': '6px',

    'font-family': 'Arial, Helvetica, sans-serif',

    'font-size': '12px',

    'fontWeight': 'normal'
    }

    tab_selected_style = {

    'padding': '6px',

    'border-style': 'solid',

    'border-color': 'grey',

    'font-family': 'Arial, Helvetica, sans-serif',

    'font-size': '12px',

    'fontWeight': 'bold'
    }

app.layout = html.Div([

html.Div([

        dcc.Tabs(id="tabs-example-graph", value='tab-1-example-graph', children=[

    dcc.Tab(label="Altitude (m)", value='tab-1-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Acceleration (g)", value='tab-2-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Filtered altitude (m)", value='tab-3-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Perpendicular acceleration (g)", value='tab-4-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Temperature (C)", value='tab-5-example-graph',

            style=tab_style, selected_style=tab_selected_style),

    dcc.Tab(label="Flight Summary", value='tab-6-example-graph',

            style=tab_style, selected_style=tab_selected_style)

]),

html.Div(id='tabs-content-example-graph')

]),

html.Div([

   dcc.Upload(id="upload-data", children = html.Button('Upload File')),



], style={

    'width': '100%',

    'height': '60px',

    'lineHeight': '60px',

    'borderWidth': '1px',

    'borderStyle': 'dashed',

    'borderRadius': '5px',

    'textAlign': 'center'

})
])

@app.callback(Output('tabs-content-example-graph', 'children'),

          Input('tabs-example-graph', 'value'))
def render_content(tab):

    if tab == 'tab-1-example-graph':

        return html.Div([

            dcc.Graph(

                id='graph-1-tabs',

                figure={

                    'data': [{

                        'x': col[1],

                        'y': col[2],

                        'type': 'line'

                    }], "layout": {

                        "title": {

                            'text': columns[1] + ' vs Time',

                            'font': {

                                'family': 'Arial, Helvetica, sans-serif',

                                'size': '15',

                                'weight': 'bold'

                            },

                        },

                        "height": 620,  # px

                        'xaxis': {

                            'title': columns[0]

                        },

                        'yaxis':{

                            'title': columns[1],

                            'fontWeight': 'bold'

                        }

                    },

                }

            )

        ])

    elif tab == 'tab-2-example-graph':

        return html.Div([

            dcc.Graph(

                id='graph-2-tabs',

                figure={

                    'data': [{

                        'x': col[1],

                        'y': col[3],

                        'type': 'line'

                    }],

                    "layout": {

                        "title": columns[2] + ' vs Time',

                        "height": 620,  # px

                        'xaxis': {

                            'title': columns[0]

                        },

                        'yaxis':{

                            'title': columns[2]

                        }

                    },

                }

            )

        ])

    elif tab == 'tab-3-example-graph':

        return html.Div([

            dcc.Graph(

                id='graph-3-tabs',

                figure={

                    'data': [{

                        'x': col[1],

                        'y': col[4],

                        'type': 'line'

                    }],

                    "layout": {

                        "title": columns[3] + ' vs Time',

                        "height": 620,  # px

                        'xaxis': {

                            'title': columns[0]

                        },

                        'yaxis':{

                            'title': columns[3]

                        }

                    },

                }

            )

        ])

    elif tab == 'tab-4-example-graph':

        return html.Div([

            dcc.Graph(

                id='graph-4-tabs',

                figure={

                    'data': [{

                        'x': col[1],

                        'y': col[5],

                        'type': 'line'

                    }],

                    "layout": {

                        "title": columns[4] + ' vs Time',

                        "height": 620,  # px

                        'xaxis': {

                            'title': columns[0]

                        },

                        'yaxis':{

                            'title': columns[4]

                        }

                    },

                }

            )

        ])

    elif tab == 'tab-5-example-graph':

        return html.Div([

            dcc.Graph(

                id='graph-4-tabs',

                figure={

                    'data': [{

                        'x': col[1],
                
                        'y': col[6],

                        'type': 'line'

                    }],

                    "layout": {

                        "title": columns[5] + ' vs Time',

                        "height": 620,  # px

                        'xaxis': {

                            'title': columns[0]

                        },

                        'yaxis':{

                            'title': columns[5]

                        }

                    },

                }

            )

        ])

    elif tab == 'tab-6-example-graph':

        return html.Div([

            html.Div([

                    html.H1("Flight Summary")

            ],

        

                        style = {

                'text-align' : 'center'

            },),

            html.Div([

                html.P(f"Total Flight Time:                         {flight_Time} m")

            ],

            style = {

                'font-size': '26px',

                'white-space': 'pre',

                'margin-left' : '50px',

                "margin-top" : '80px'

            },

            ),

            html.Div([

                html.P(f"Maximum altitude:                       {max_altitude} m        reached at      {max_alt_time} sec")

            ],

                        style = {

                'font-size': '26px',

                'white-space': 'pre',

                'margin-left' : '50px',

                "margin-top" : '5px'

            },),

            html.Div([

                html.P(f"Maximum Acceleration:               {max_aceleration} m/s/s     reached at      {max_ace_time} sec")

            ],             style = {

                'font-size': '26px',

                'white-space': 'pre',

                'margin-left' : '50px',

                "margin-top" : '5px'

            },),

            html.Div([

                html.P(f"Maximum Speed:                         {t_speed} m/s          reached at      {time_speed} sec")

            ],             style = {

                'font-size': '26px',

                'white-space': 'pre',

                'margin-left' : '50px',

                'margin-top' : '5px'

            },)

        ])
    port = 8009

def open_browser():

    webbrowser.open("http://localhost:{}".format(port))
    if name == 'main':

        Timer(1, open_browser).start()

app.run_server(port=port, debug=True, use_reloader=True)

Try to make something like this:

    import os

    filename = input("Enter filename with extension: ") 
   
    BASE_DIR = os.path.dirname(os.path.abspath(__file__))
    filename = os.path.join(BASE_DIR, filename)
    print(filename)

its giving me a erro “name” is not defined

Hi @haider1224

You must to use import os