Create Dropdown with label and values using panda library and Dash Plotly in python

Question

I am using panda library in Python to read from a csv file and fill a Dropdown. My application uses Dash Plotly to create a HTML web interface. I am filling with only the values of the Dropdown, the labels of the Dropdown are the same of the values. How do I change the labels to be the text from the csv file?

available_rpi.csv

ip,name
192.168.1.6,"Virtual I²C (192.168.1.6)"
192.168.1.102,"GPS UART (192.168.1.102)"
192.168.1.106,"Ultrasonic I²C (192.168.1.103)"

python script:

import dash,requests,pandas as pd

df = pd.read_csv('available_rpi.csv', usecols = ['ip','name'])
available_rpi = df['ip'].unique()

app.layout = html.Div( [
    html.H1(children='RESENSE'),
    html.Div(children='''RESENSE: Transparent Record and Replay in the Internet of Things (IoT).'''),
    # html.Div(['Name : ', dcc.Input(id='input',value='ACC',type='text') ]),
    # dcc.Markdown(''' '''),
    html.Label('Raspberry Pi'),
    dcc.Dropdown(
        id = "input",
        options=[{'label': i, 'value': i} for i in available_rpi],
        value=''
    ),
    html.Div(id='output'),
    #   Graph for arriving data (static)
    dcc.Graph(id='data', animate=True),
    dcc.Interval(id='graph-update',interval=2*1000)
    ])

arudzinska · Accepted Answer · 2018-11-28 16:19:04Z

How about reading the CSV data in a bit different way with pandas and storing it in a dictionary?

import dash
import pandas as pd
import dash_core_components as dcc
import dash_html_components as html

df = pd.read_csv('available_rpi.csv', usecols = ['ip','name'])
available_rpi = df.to_dict('records')

app = dash.Dash(__name__)

app.layout = html.Div( [
    html.H1(children='RESENSE'),
    html.Div(children='''RESENSE: Transparent Record and Replay in the Internet of Things (IoT).'''),
    # html.Div(['Name : ', dcc.Input(id='input',value='ACC',type='text') ]),
    # dcc.Markdown(''' '''),
    html.Label('Raspberry Pi'),
    dcc.Dropdown(
        id = "input",
        options=[{'label': i['name'], 'value': i['ip']} for i in available_rpi],
        value=''
    ),
    html.Div(id='output'),
    #   Graph for arriving data (static)
    dcc.Graph(id='data', animate=True),
    dcc.Interval(id='graph-update',interval=2*1000)
    ])

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

rahlf23 · Accepted Answer · 2018-11-28 16:20:51Z

1

You should store your .csv file as a list of dictionaries using orient='records' and then use a list comprehension to set your options for your Dropdown component:

import dash
import pandas as pd
import dash_core_components as dcc
import dash_html_components as html

available_rpi = pd.read_csv('available_rpi.csv').to_dict(orient='records')

app = dash.Dash(__name__)

app.layout = html.Div([

    html.H1(children='RESENSE'),

    html.Div(children='''RESENSE: Transparent Record and Replay in the Internet of Things (IoT).'''),

    html.Label('Raspberry Pi'),

    dcc.Dropdown(
        id = "input",
        options=[{'label': i['name'], 'value': i['ip']} for i in available_rpi],
        value=''
    ),

    html.Div(id='output'),

    #Graph for arriving data (static)
    dcc.Graph(id='data', animate=True),

    dcc.Interval(id='graph-update',interval=2*1000)

])

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

edited Nov 28, 2018 at 16:20

answered Nov 28, 2018 at 16:05

rahlf23

9,0494 gold badges30 silver badges57 bronze badges

2 Comments

Felipe Over a year ago

does not work. You are using i for label and value

rahlf23 Over a year ago

Modified to meet your requirements. Misread your question at first, my answer is edited.

Felipe · Accepted Answer · 2018-11-28 16:14:53Z

0

I have to use a dictionary....

available_rpi = pd.read_csv('available_rpi.csv', header=None, dtype={0: str}).set_index(0).squeeze().to_dict()
#print("Raspberry Pi's available:")
#for key, car in available_rpi.items():
#    print('{} : {}'.format(key, car))

app.layout = html.Div( [
    html.H1(children='RESENSE'),
    html.Div(children='''RESENSE: Transparent Record and Replay in the Internet of Things (IoT).'''),
    # html.Div(['Name : ', dcc.Input(id='input',value='ACC',type='text') ]),
    # dcc.Markdown(''' '''),
    html.Label('Raspberry Pi'),
    dcc.Dropdown(
        id = "input",
        options=[{'label': v, 'value': k} for k, v in available_rpi.items()],
        value=''
    ),
    html.Div(id='output'),
    #   Graph for arriving data (static)
    dcc.Graph(id='data', animate=True),
    dcc.Interval(id='graph-update',interval=2*1000)
    ])

answered Nov 28, 2018 at 16:14

Felipe

7,7638 gold badges54 silver badges119 bronze badges

2 Comments

rahlf23 Over a year ago

This still is not a full Dash application btw. You lack the necessary imported libraries, as well as the basic structure

Felipe Over a year ago

yes. it is not full, I only copied the part that I have questions. I didn't copy the imports

Collectives™ on Stack Overflow

Create Dropdown with label and values using panda library and Dash Plotly in python

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related