Q: Filtering data via Data Range in dash I have this dashboard am working on with a sample data as shown below
Time,Tp,Cl,pH,Redox,Leit,Trueb,Cl_2,Fm,Fm_2,EVENT
2016-02-15T11:54:00Z,4.4,0.14,8.38,755,232,0.009,0.11,1428,1020,FALSE
2016-02-15T11:55:00Z,4.4,0.14,8.38,755,232,0.009,0.111,1436,1018,FALSE
2016-02-15T11:56:00Z,4.4,0.14,8.38,755,232,0.014,0.113,1471,1019,TRUE
2016-02-15T11:57:00Z,4.4,0.14,8.37,755,232,0.015,0.111,1457,1015,FALSE
2016-02-15T11:58:00Z,4.4,0.14,8.38,755,232,0.013,0.111,1476,1019,FALSE
2016-02-15T11:59:00Z,4.4,0.14,8.36,755,232,0.013,0.114,1416,1015,TRUE
2016-02-15T12:00:00Z,4.4,0.14,8.36,755,235,0.012,0.111,1452,1017,FALSE


I filter the data and display it as a plot using 3 dropdown. Basically i want to plot columns(Tp to Fm_2)  (first dropdown)within a date-range(second dropdown),and also the option of whether the event is true ?false(third dropdown). Below is the code to do that, first and third option is working fine, however the second option isn't. Any help to why this isn't working.
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "Sensor Analytics: Understanding Your Metrics!"

app.layout = html.Div( 
    children=[
        html.Div(
            children=[
                html.P(children="", className="header-emoji"),
                html.H1(
                    children="Sensor Analytics", className="header-title"
                ),
                html.P(
                    children="Visualization analysis of sensor readings "
                    ,
                    className="header-description",
                ),
            ],
            className="header",
        ),
        html.Div(
            children=[
                html.Div(
                    children=[
                        html.Div(children="Metrics", className="menu-title"),
                        dcc.Dropdown(
                            id="metrics-filter",
                            options=[
                                {"label": col, "value": col}
                                for col in data.columns
                            ],
                            value="Tp",
                            clearable=False,
                            className="dropdown",
                        ),
                    ]
                ),
                html.Div(
                    children=[
                        html.Div(children="Event", className="menu-title"),
                        dcc.Dropdown(
                            id="event-filter",
                            options=[
                                {"label": 'False', "value":'False'},
                                {"label": 'True', "value":'True'}
                            ],
                            value="False",
                            clearable=False,
                            searchable=False,
                            className="dropdown",
                        ),
                    ],
                ),
                html.Div(
                    children=[
                        html.Div(
                            children="Date Range", className="menu-title"
                        ),
                        dcc.DatePickerRange(
                            id="date-range",
                            min_date_allowed=data.Time.min().date(),
                            max_date_allowed=data.Time.max().date(),
                            start_date=data.Time.min().date(),
                            end_date=data.Time.max().date(),
                        ),
                    ]
                ),
            ],
            className="menu",
        ),
        html.Div(
            children=[
                html.Div(
                    children=dcc.Graph(
                        id="series1",
                        config={"displayModeBar": False},
                    ),
                    className="card",
                ),
                
            ],
            className="wrapper",
        ),
    ]
)

@app.callback(
    Output("series1", "figure"),
    [
        Input("metrics-filter", "value"),
        Input("event-filter", "value"),
        Input("date-range", "start_date"),
        Input("date-range", "end_date"),    
    ],
)
def update_charts(metrics,event,start_date, end_date):
    df = data
    
    mask =((df.Time >= start_date) & (df.Time <= end_date))
    df_selected = df.loc[mask,:]
    
    if (event == 'True') :
        df_selected = df[df['EVENT']==True]
    else:
        df_selected = df[df['EVENT']==False]
        
    chart_figure = {
        "data": [
            {
                "x": df_selected["Time"],
                "y": df_selected[metrics],
                "type": "lines",
                "hovertemplate": "%{y:.2f}<extra></extra>",
            },
        ],
       "layout": {
            "title": {
                "text": "Sensor readings",
                "x": 0.05,
                "xanchor": "left",
            },
            "xaxis": {"fixedrange": True},
            "yaxis": {"tickprefix": "", "fixedrange": True},
            "colorway": ["#17B897"],
        },
    }
    return chart_figure


if __name__ == "__main__":
    app.run_server(debug=True)



