Black Lives Matter. Please consider donating to Black Girls Code today.

dcc.DatePickerRange callback to graph not working

Hi there, I am trying to get my plot to interact with the date range callback to select the publication material of different structures. The plot is working however regardless of the date range I choose it only populates points from the year 2009. I am quite stuck so any help would be appreciated. Thank you! I have also attached my csv file below.

import pandas as pd
import flask as flask
import dash as dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.express as px
from datetime import datetime as dt

df = pd.read_csv('/Users/mythilisutharson/Documents/cam_work/MOF-geo-prop-tool/geoprop-data.csv', low_memory=False)
features = df.columns
server = flask.Flask(__name__)
app = dash.Dash(__name__, server=server)

SUP = str.maketrans("0123456789", "⁰¹²³⁴⁵⁶⁷⁸⁹")

dimensions = ['select x variable', 'select y variable ', 'select color variable', 'select size variable']
app.layout = html.Div([
    html.H1('Geometrical Properties of the CSD MOF Subset',
            style={'textAlign': 'center', 'color': 'DarkSlateGrey', 'fontSize': 20, 'font-family': 'Arial'}),
    html.Div([dcc.Graph(id='geoprop-plot')
              ], style={'width': '70%', 'padding': 10, 'display': 'inline-block', }),
    html.Div([html.Div([
        html.Label(["Select X variable:",
                    (dcc.Dropdown(id='xaxis', placeholder="Select an option for X",
                                  multi=False, options=[{'label': i, 'value': i} for i in features
                                                        ]))
                    ], className="six columns",
                   style={'padding': 10
                          })
    ]),
        html.Div([
            html.Label(["Select Y variable:",
                        (dcc.Dropdown(id='yaxis',
                                      placeholder="Select an option for Y",
                                      multi=False, options=[{'label': i, 'value': i} for i in features
                                                            ]))
                        ], className="six columns",
                       style={'padding': 10
                              })
        ]),
        html.Div([
            html.Label(["Select size variable:",
                        (dcc.Dropdown(id='saxis',
                                      placeholder="Select an option for size",
                                      multi=False, options=[{'label': i, 'value': i} for i in features
                                                            ]))],
                       className="six columns",
                       style={'padding': 10}
                       )
        ]),
        html.Div([
            html.Label(["Select color variable:",
                        (dcc.Dropdown(id='caxis',
                                      placeholder="Select an option for color",
                                      multi=False, options=[{'label': i, 'value': i} for i in features
                                                            ]))
                        ], className="six columns",
                       style={'padding': 10
                              })
        ]),
    ],
        style={'fontSize': 14, 'font-family': 'Arial', 'width': '25%',
               'display': 'inline-block',
               'float': 'right', 'padding': 15}
    ),
    html.Div([dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed=dt(1954, 1, 1),
        max_date_allowed=dt(2019, 12, 31),
        start_date=dt(2000, 1, 1),
        end_date=dt(2019, 1, 1),
        start_date_placeholder_text='DD/MM/YYYY'
    )]),
    html.Div([dcc.RadioItems(id='data-type',
                             options=[{'label': i, 'value': i} for i in
                                      ['All', 'Date Range']],
                             value='Linear',
                             labelStyle={'display': 'inline-block'})]),
    app.css.append_css({
        'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
    })
])


@app.callback(Output("geoprop-plot", "figure"), [Input('xaxis', "value"),
                                                 Input('yaxis', 'value'),
                                                 Input('saxis', 'value'),
                                                 Input('caxis', 'value'),
                                                 Input('my-date-picker-range', 'start_date'),
                                                 Input('my-date-picker-range', 'end_date'),
                                                 Input('data-type', 'value')],
              )
def make_figure(x, y, size, color, start_date, end_date, data_type):
    if x and y and color and size is None:
        return dash.no_update
    # data = df.loc[(df['Publication Year'] >= start_date) & (df['Publication Year'] <= end_date)]
    
    if data_type == 'All':
        data = df
    elif data_type == 'Date Range':
        data = df.loc[start_date:end_date, :]
    return px.scatter(data, x=data[x], y=data[y], title="MOF Explorer",
                      # animation_frame="Publication Year",
                      # animation_group="CSD refcode ",
                      size=data[size], color=data[color], template="none",
                      hover_name="CSD refcode ", color_continuous_scale='Viridis',
                      hover_data={},
                      ).update_xaxes(showgrid=False, title=x, autorange=True, ticks='outside',
                                     showline=True, showspikes=True, spikethickness=1, spikedash='solid',
                                     mirror=True).update_yaxes(spikedash='solid',
                                                               showgrid=False, title=y,
                                                               autorange=True, ticks='outside',
                                                               showspikes=True, spikethickness=1,
                                                               showline=True, mirror=True).update_layout(
        clickmode='event+select', hovermode='closest', margin={'l': 80}, autosize=True, font=dict(family='Helvetica'),
        coloraxis_colorbar=dict(title=dict(text=color.translate(SUP), side='right', font=dict(size=14))),
    ).update_traces(marker=dict(opacity=0.7, showscale=False, line=dict(width=0.5, color='DarkSlateGrey'),
                                ))


if __name__ == '__main__':
    app.run_server()

Hi @msuths1,

Your graph seems to work perfectly. You shoud look at your dimensions values (dropdown) if it’s not because of missing values there.



Hi @ben13,
Thanks for the response! The graphs do plot yes but the Data picker does not work accurately and I can’t seem to figure out why. Say if we have X as the years, the below is what comes up for the range 1954 to 2019 which is not true. From playing around with the plot it seems that the graph is stuck on 2009 and add or removes points from 2009 as I change the dates. I am unsure as to why this is occurring.