Rename Dataframe fields (column names) based on the selection from dcc.dropdown

Dash Python
1

I am importing a csv file name sales.csv using pandas with column name [Loc, Dates,Revenue]

I want to rename the column name based on the value selected by the user in the dcc.dropdown menu

Challenge -

  1. I was not able to assign the value of the dropdown in any global variable ( say Location, Date, Sales) that can be later used to rename the data frame using df.rename(columns={0 : Location, 1 : Date, 2 : Sales}, inplace=True)

  2. This led to assign the html.Div(id=‘my-div1’) as a children to Input of @app.callback, then i tried renaming the dataframe column with index 1 to this children. It didn’t work.

@app.callback(
Output(component_id=‘my-div4’, component_property=‘children’),
[Input(component_id=‘my-div1’, component_property=‘children’)]
)
def update_output_div(input_value):
dff = df[df.rename(columns={1 : ‘input_value’},inplace=True)]
return dff.columns

  1. If the above logic work, my idea was to renaming dataframe column by 3 different @app.callback and function

Please let me know what am i doing wrong or if any of you have a work around to this challenge. Your time and your effort is much appreciated.

#######

This provides examples of Dash Core Components.

Feel free to add things to it that you find useful.

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

df = pd.read_csv(“C:/Users/umar/Documents/P/Python/dash/Tutorials/Dash_Code/Lesson_2/sales.csv”)

app = dash.Dash()

app.layout = html.Div(
[

# DROPDOWN https://dash.plot.ly/dash-core-components/dropdown
    html.Div(
        [
            html.Div([html.Label('Report Parameter')], style={'color': 'black', 'fontSize': 20}),
            html.Div([html.Label('1. Location')], style={'color': 'black', 'fontSize': 18}),
            html.Div([html.Label('2. Date')], style={'color': 'black', 'fontSize': 18}),
            html.Div([html.Label('3. Sales')], style={'color': 'black', 'fontSize': 18})
        ],
        className='six columns'
        ),

   html.Div(
       [
           html.Div([html.Label('Source Data Fields')], style={'color': 'black', 'fontSize': 20, 'border':'2 px blue solid'}),
           html.Div([
              dcc.Dropdown(
                        id='dropdowns1',
                        options=[{'label': i, 'value': i} for i in df.columns],
                        value='Loc',
                        placeholder="Select appropriate field from source data"
                        )
                    ]),
            html.Div([
              dcc.Dropdown(
                        id='dropdowns2',
                        options=[{'label': i, 'value': i} for i in df.columns],
                        value='Loc',
                        placeholder="Select appropriate field from source data"
                        ),
                    ]),
            html.Div([
              dcc.Dropdown(
                        id='dropdowns3',
                        options=[{'label': i, 'value': i} for i in df.columns],
                        value='Loc',
                        placeholder="Select appropriate field from source data"
                        )
                    ])
       ],
       className='six columns'
       ),
      html.Div(id='my-div1'),
      html.Div(id='my-div2'),
      html.Div(id='my-div3'),
      #html.Button(id='submit-button',n_clicks=0,children='submit here'),
      html.Div(id='my-div4')

],
className='row'

)

@app.callback(
Output(component_id=‘my-div1’, component_property=‘children’),
[Input(component_id=‘dropdowns1’, component_property=‘value’)]
)
def update_output_div(input_value):
#return ‘“Location” is assigned for “{}”’.format(input_value)
var1 = input_value,
return var1

@app.callback(
Output(component_id=‘my-div2’, component_property=‘children’),
[Input(component_id=‘dropdowns2’, component_property=‘value’)]
)
def update_output_div(input_value):
return ‘“Date” is assigned for “{}”’.format(input_value)

@app.callback(
Output(component_id=‘my-div3’, component_property=‘children’),
[Input(component_id=‘dropdowns3’, component_property=‘value’)]
)
def update_output_div(input_value):
return ‘“Sales” is assigned for “{}”’.format(input_value)

@app.callback(
Output(component_id=‘my-div4’, component_property=‘children’),
[Input(component_id=‘my-div1’, component_property=‘children’)]
)
def update_output_div(input_value):
dff = df[df.rename(columns={1 : ‘input_value’},inplace=True)]
return dff.columns

app.css.append_css({
‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})

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