Datepickerrange Not update graph with multiple lines

Dash Python
1

Hello all,

I wanna to build a chart that represent the duration of calls over several roads as shown below

image
image927×643 88.5 KB

I create a Date Picker Range to change the Date axis based on user selection,
when I create a callback for this graph, find the code below

@app.callback(
    Output('mo-per-road-paragraph', 'figure'),
    Input('org-voice-per-road-date-picker', 'start_date'),
    Input('org-voice-per-road-date-picker', 'end_date'),
    State('mo-per-road-paragraph', 'figure'),
)
def update_output(start_date, end_date, mo_per_road_paragraph):
    if not start_date or not end_date:
        raise dash.exceptions.PreventUpdate
    else:

        mo_per_road_paragraph = Patch()
        mo_per_road_paragraph['layout']['xaxis']['range'][0, 0] = start_date
        mo_per_road_paragraph['layout']['xaxis']['range'][1, 1] = end_date
        return mo_per_road_paragraph

and this is the code for the chart

html.Div([

                dcc.DatePickerRange(
                    id='org-voice-per-road-date-picker',  # ID to be used for callback
                    calendar_orientation='horizontal',  # vertical or horizontal
                    day_size=39,  # size of calendar image. Default is 39
                    end_date_placeholder_text="End Date",  # text that appears when no end date chosen
                    with_portal=False,  # if True calendar will open in a full screen overlay portal
                    first_day_of_week=0,  # Display of calendar when open (0 = Sunday)
                    reopen_calendar_on_clear=True,
                    is_RTL=False,  # True or False for direction of calendar
                    clearable=True,  # whether or not the user can clear the dropdown
                    number_of_months_shown=1,  # number of months shown when calendar is open
                    min_date_allowed=mo_voice_traffic_org['Date'].min(),
                    # minimum date allowed on the DatePickerRange component
                    max_date_allowed=mo_voice_traffic_org['Date'].max(),
                    initial_visible_month=mo_voice_traffic_org['Date'].min(),
                    display_format='MMM Do, YY',
                    month_format='MMMM, YYYY',
                    persistence=True,
                    persisted_props=['start_date'],
                    persistence_type='session',

                    updatemode='bothdates'
                ),

                dcc.Graph(id='mo-per-road-paragraph',
                          figure=px.line(data_frame=mo_voice_traffic_org, x='Date', y='duration(min)',
                                         color='Road Name',
                                         title='MO Voice Calls - Min/day', markers=True,
                                         ),
                          responsive=True, style={'display': 'inline-block', 'margin-top': '3rem', 'width': '58rem',
                                                  'margin-right': '2rem', 'border': 'solid black'}
                          ),

            ]),

So, when I try to put start and end date, there is no change on the graph (first problem)

Second problem
When I try to select on of roads from the legend, it overlap with the next graph

image
image1401×461 58.6 KB

So, can anyone help me to solve this problems

Thanks in advance.

2

hi @DoaaElbanaa
instead of images of code, can you please provide your app code with us, including your data (MRE). If you can’t share your data, you can also share sample data.

This post will show you how to write MRE.

Thank you.

3

Thanks Adam for your helpful comments, I edit the post with code

4

Can you share your sample data too?