Drawing multiple lines based on a list on the graph

Dash Python
1

Hi,

Currently I have under ‘shapes’ something like this:

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    # html.H1(
    #     children='Hello Dash',
    #     style={
    #         'textAlign': 'center',
    #         'color': colors['text']
    #     }
    # ),
    #
    html.Div(children='Demonstration of Web-based Dashboard', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

    dcc.Graph(
        id='example-graph',
        figure={

            'data': [
                {'x': forecast['ds'], 'y': forecast['yhat_lower'], 'type': 'line', 'line': {'width': 0},
                 'name': 'Lower Pred', 'showlegend': False, 'hoverinfo': 'none'},
                {'x': forecast['ds'], 'y': forecast['yhat'], 'type': 'line', 'name': 'Prediction', 'color': 'blue',
                 'fillcolor': 'rgba(68, 68, 68, 0.1)',
                 'fill': 'tonexty', 'line': {'color': 'rgb(22, 96, 167)'}},
                {'x': forecast['ds'], 'y': forecast['yhat_upper'], 'type': 'line', 'fillcolor': 'rgba(68, 68, 68, 0.1)',
                 'fill': 'tonexty', 'line': {'width': 0}, 'name': 'Upper Pred', 'showlegend': False,
                 'hoverinfo': 'none'},
                go.Scatter(
                    x=df['Date'],
                    y=df['Base_Rev'],
                    mode='markers',
                    name='Actual',
                    line=dict(color='rgb(0, 0, 0)', width=0),
                )
            ],

            'layout': {
                'title': 'Network Revenue Prediction vs Actual',
                'xaxis': dict(
                    rangeselector=dict(
                        buttons=list([
                            dict(count=1,
                                 label='1m',
                                 step='month',
                                 stepmode='backward'),
                            dict(count=6,
                                 label='6m',
                                 step='month',
                                 stepmode='backward'),
                            dict(count=1,
                                 label='YTD',
                                 step='year',
                                 stepmode='todate'),
                            dict(count=1,
                                 label='1y',
                                 step='year',
                                 stepmode='backward'),
                            dict(step='all')
                        ])
                    ),
                    rangeslider=dict(
                        visible=True
                    ),
                    type='date'
                ),
                'shapes': [
                    # 1st highlight during Feb 4 - Feb 6
                    {
                        'type': 'rect',
                        # x-reference is assigned to the x-values
                        'xref': 'x',
                        # y-reference is assigned to the plot paper [0,1]
                        'yref': 'paper',
                        'x0': '2018-05-01',
                        'y0': 0,
                        'x1': '2018-08-01',
                        'y1': 1,
                        'fillcolor': '#d3d3d3',
                        'opacity': 0.2,
                        'line': {
                            'width': 0,
                        }
                    },
                    # Line Vertical
                    {
                        'type': 'line',
                        'x0': '2018-05-01',
                        'y0': 0,
                        'x1': '2018-05-01',
                        'y1': 200000000,
                        'line': {
                            'color': 'rgb(55, 128, 191)',
                            'width': 1,
                            'dash': 'dot',
                        },
                    },
                ]
            }
        }
    ),


    html.Div(children='Demonstration of Web-based Dashboard', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

])

It works but I need more functionality here…
Say I have a list of dates [‘2018-04-01’, ‘2018-05-01’, 2018-08-01’]
How can I automatically have Dash draw lines for these three items, based on the contents of the list?
Pardon me I’m still new to Dash…

Thanks.

2

It’s fine, managed to figure it out.
Just define the list outside app.layout whereever your computation code is.

and do

‘shapes’ : shapes_list_you_defined

3

hi, do you have an example of how you did multiple lines as shapes in layout? I dont quite get what you mean by the shapes_list_you_defined and where in the code above did you put it?

I’m trying to overlay vertical lines on my time series plots at quarterly intervals.