Adding lines to a graph using a dataframe

Dash Python
1

Hello everyone.

I have computed the following code:

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
from collections import defaultdict
import pandas as pd
import sys

app = dash.Dash()
app.config.suppress_callback_exceptions=True
df = pd.read_csv(‘https://gist.githubusercontent.com/jbrav/f281e0063418dd62ad63004671cf96ec/raw/86ca0f728bdcd0a10db99d81a7949374acba7c35/coma.csv’)
print df
available_funds = df[‘FUNDS’].unique()

app.layout = html.Div([
html.Div([
html.Div([
html.H1(‘Evolucion rentabilidades’),
dcc.Dropdown(
id=‘mydropdown0’,
options= [
{‘label’: ‘SCHRODER’, ‘value’: ‘SCHRODER’},
{‘label’: ‘OPM’, ‘value’: ‘OPM’},
{‘label’: ‘MSF’, ‘value’: ‘MSF’}
],
value=‘MSF’,
multi=True),
dcc.Graph(id=‘graph0’),
]),
html.Div([
html.H1(‘Evolucion volatilidades’),
dcc.Dropdown(
id=‘mydropdown2’,
options= [
{‘label’: ‘MUM’, ‘value’: ‘MUM’},
{‘label’: ‘MAM’, ‘value’: ‘MAM’},
{‘label’: ‘MOM’, ‘value’: ‘MOM’},
],
value=‘MUM’,
multi=True),
dcc.Graph(id=‘graph2’)
]),

    html.Div([
        html.H1('Ejemplo regresion'),
        dcc.Dropdown(
            id='mydropdown3',
            options= [
               {'label': 'CLEP', 'value': 'CLEP'},
               {'label': 'CLAP', 'value': 'CLAP'},
               {'label': 'CLOP', 'value': 'CLOP'},
            ],
            value='CLEP',
            multi=True),
        dcc.Graph(
            id='graph3')
    ]),
])])

@app.callback(
Output(‘graph0’,‘figure’), [Input(‘mydropdown0’, ‘value’)])
def update_graph0(selected_values):

odf = df.ix[df['FUNDS'] == selected_values]
return {
    'data': [{
        'x': odf.YEAR,
        'y': odf.QUANTITY
         
    }]
}

@app.callback(
Output(‘graph2’,‘figure’), [Input(‘mydropdown2’, ‘value’)])
def update_graph2(selected_dropdown_value):
odf = df.ix[df[‘FUNDS’] == selected_dropdown_value]
return {
‘data’: [{
‘x’: odf.YEAR,
‘y’: odf.QUANTITY
}]
}

@app.callback(
Output(‘graph3’,‘figure’), [Input(‘mydropdown3’, ‘value’)])
def update_graph3(selected_dropdown_value):
odf = df.ix[df[‘FUNDS’] == selected_dropdown_value]

return {
    'data': [{
        'x': odf['YEAR'],
        'y': odf['QUANTITY']
    }]
}

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

if name == ‘main’:
app.run_server(debug=True, port= 1000)

This works, however I do want to be able for the graphs to be updated at anytime that I select a value from the dropdown. Currently this is not happening, as I am only able to select one value. I suppose there is an easy way out of this but I am stuck. Any help?

thx

2

@jbrvo If multi=True inside a dcc.Dropdown then selected_dropdown_value is going to be a list rather than a single value so doing a df.ix[df[‘FUNDS’] == selected_dropdown_value] won’t necessarily work. instead, you’ll probably need to do something like

df[df[‘FUNDS’].str.contains('|'.join(selected_dropdown_value))

I believe that there are some similar examples to this elsewhere in the forum. I recommend searching for multi=True and seeing if any of the other discussions would help. For example, see How to populate a DropDown from unique values in a pandas data frame

I also recommend print(selected_dropdown_value) inside your callbacks to inspect the values and using an interactive session in IPython figure out the pandas filtering.

I hope that helps!

3

Hello Chris,

Your help is being unveilabable for me to understand and increase my knowledge in both Python and Dash, thank you for your dedication and commitment.

I would like for various lines (i.e different sets of data) to be added to my graph. It is true that there are three graphs in this particular dataset (and that is the intention too) but I tried your solution and it did not work. I only was obtaining data added in one line.

4

If I understand correctly what you probably want to do is something like this:

def update_graph3(selected_drop_downs):
    # loop through each selectd fund and add a trace to the graph corresponding to that fund
    traces = []
    for fund in selected_drop_downs:
        odf = df[df[‘FUND’] == fund]
        trace = {'x': odf['YEAR'], 'y': odf['QUANTITY'], name=fund}
        traces.append(trace)
    return {'data': traces}
2 Likes
5

@mikesmith1611 I ran it but it keeps displyaing only one line accumulating points rather than three different lines. All the elements I want to plot are in the same column in the CSV. I want to plot three different things from within the same column in the csv.

Best and thank you!

6

I have made an edit to the above which I think may be what you need :grinning:

2 Likes
7

this has completely solved the issue and also helped me to understand it better. Thank you very much!!

1 Like