Datepickerange doesn't work in my case

Dash Python
1

Hello all :slight_smile:

I’m trying to make a dashboard to visualize some meteo data.
All is good but i’m trying to add a datepickerrange (which not work in my case). When i select a range, nothing happens.
Here is my code (sorry, it’s a little messy because i’m trying a lot of things, so it’s more a draft) :

import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go
from plotly import tools
import datetime
import pandas as pd
import time
from datetime import datetime as dt


app = dash.Dash(__name__)
server = app.server # the Flask app

    
app.layout = html.Div([
    html.H1('Visualization'),
    dcc.Dropdown(
        id='dropdown',
        options=[
                {'label': 'Possession','value': 'POSS'},
                {'label': 'SainteMarie','value': 'MASM'},
                {'label': 'NosyBe','value': 'MANB'},
                {'label': 'FortDauphin','value': 'MAFD'},
                ],
                value='MANB'),
    dcc.DatePickerRange(
                id='my-date-picker-range',
                min_date_allowed=dt(2018, 8, 5),
                max_date_allowed=dt(2022, 9, 19),
                initial_visible_month=dt(2019, 8, 5),
                start_date=dt(2018, 8, 20),
                end_date=dt(2018, 8, 25)),
    dcc.Graph(id='update-value',
                figure={"layout": {
                "title": "My Dash Graph",
                "height": 800,  # px
                "width": 800,  # px
                }})
])


@app.callback(dash.dependencies.Output('update-value', 'figure'),
              [dash.dependencies.Input('dropdown', 'value'),
               dash.dependencies.Input('my-date-picker-range', 'start_date'),
               dash.dependencies.Input('my-date-picker-range', 'end_date')])
              

#def display_value(value):
 #   return 'You have selected "{}"'.format(value)


def update_value(value,start_date,end_date):
    df = pd.read_csv(value+'.csv')
    print("coucou",value+'.csv')
    print("start",start_date)

    #x1=df['dateTime']
    x2= pd.to_datetime(df['dateTime'],unit='s')
    #x2=xx[start_date,end_date]
    print("x2",x2)
    y1=df['outTemp']
    y2=df['barometer']
    y3=df['windSpeed']
    y4=df['rain']
    y5=df['rainRate']
    
    trace1 = go.Scatter(x=x2,y=y1,yaxis='y1',xaxis='x1',name="Temperature")
    trace2 = go.Scatter(x=x2,y=y2,yaxis='y2',xaxis='x2',name="Pression")
    trace3 = go.Scatter(x=x2,y=y3,yaxis='y3',xaxis='x3',name="Windspeed")
    trace4 = go.Scatter(x=x2,y=y4,yaxis='y4',xaxis='x4',name="Rain")
    trace5 = go.Scatter(x=x2,y=y5,yaxis='y5',xaxis='x5',name="Rainrate")

    fig = tools.make_subplots(rows=4, cols=1,shared_xaxes=True,
                        print_grid=True,
                        horizontal_spacing=0.15,
                        vertical_spacing=0.03)

    fig.append_trace(trace1, 1, 1)
    fig.append_trace(trace2, 2, 1)
    fig.append_trace(trace3, 3, 1)
    fig.append_trace(trace4, 4, 1)
    fig.append_trace(trace5, 4, 1)

    #fig.update_layout(xaxis_range=[start_date,end_date])
    #fig['layout'].update(title='Please wait for data retrieving,can be long (up to 1mn)')

#    fig["layout"]["yaxis1"].update(anchor = "x2", side = "left")
#    fig["layout"]["yaxis2"].update(anchor = "x2", side = "left")
#    fig["layout"]["yaxis3"].update(anchor = "x2", side = "left")
#    fig["layout"]["yaxis4"].update(range = [0, 0.5],anchor = "x2", side = "right",overlaying = 'y3')
#    fig["layout"]["yaxis5"].update(anchor = "x2", side = "left")
    layout=fig.layout.update(width=900, height=1000,

                      yaxis5=dict(overlaying='y4',
                                  side='right',
                                  anchor='x4',
                                  range=[00, 30],
                                  showgrid=True,
                                  title='Rainrate (mm/h)'),
                      hovermode='closest')
    fig['data'][4].update(yaxis='y5')
    fig['layout']['xaxis'].update(title='', range=['2018-07-01','2018-12-31'])
    fig.update_layout(legend_orientation="h")
    fig.layout.update(template="plotly_white",
                      
                        yaxis1=dict(
                                  showgrid=True,
                                  title='Temperature (C)'),
                        yaxis2=dict(
                                  showgrid=True,
                                  title='Pressure (hPa)'),
                        yaxis3=dict(
                                  showgrid=True,
                                  title='Windspeed (m/s)'),
                        yaxis4=dict(
                                  showgrid=True,
                                  title='Rain (mm)'),
                            )
    #fig['data'][1].update(xaxis=[start_date,end_date])
    #fig.update_layout(xaxis_range=['2018-07-01','2018-12-31'])
    test= go.Figure(data=fig,layout=layout)
    #go.Layout(xaxis=dict(range=['2018-07-01','2018-12-31']))
    #test2=go.layout.XAxis(range=[start_date, end_date])
    return test

if __name__ == '__main__':
    app.run_server(host='0.0.0.0',port=8050)```

Have you an idea of why the datepicker doesn't work with my code ? 

PS: it's a 4 subplots plot, of course the datepickerange must work for the 4 subplot simultaneously 

Thank you in advance !! :)

PS: how do you add the some code on the post, i didn't succeed :frowning:
2

Hi Yonafunu,
for better readability please add ``` before and after your code.
That will properly format it and make it easier for readers to understand it.
Cheers

3

Thank you, it’s edited :slight_smile:

4

So, with “nothing happens” you also mean, that none of the prints get triggered?
Does something happen, when you select the dropdown value?
If not, the first thing coming to mind would be, that the dataframe cannot be uploaded, because it cannot be found.
All files would need to be in the folder, the script is in and be called ‘MANB.csv’ etc.

If you just mean the datepicker isn’t doing anything: Maybe I am missing something here (some comments in the code could help with that ;), but the only time you are actually using the datepicker values is in the line

print("start",start_date)

So I am not sure what exactly you want to happen.