dcc.DatePickerRange callback to graph not working

@msuths1 wrote:

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()

Posts: 3

Participants: 2

Read full topic