How do I remove the timestamp without breaking dcc.RangeSlider?

Question

I'm new to Python and I'm trying to build a dashboard using Plotly-dash and FRED data which comes with a datetime, but dash does not support datetime. So i used the solution provided here: https://stackoverflow.com/a/51003812/15717158 , and it works great, except that the RangeSlider now displays both date and times, but I only want it to display the date. How do I remove the time from the datetime without breaking the chart? My code is below.

from fredapi import Fred
fred = Fred(api_key="*your personal api key*")
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
import time
from datetime import datetime

df = fred.get_series("WGS1YR", observation_start="1970-01-01")
df = df.reset_index()
df.columns=["Date","1 Year Rate"]

def unixTimeMillis(dt):
    ''' Convert datetime to unix timestamp '''
    return int(time.mktime(dt.timetuple()))

def unixToDatetime(unix):
    ''' Convert unix timestamp to datetime. '''
    return pd.to_datetime(unix,unit='s')


app = dash.Dash()

app.layout = html.Div([
                dcc.Graph(id = "Historic_US_1_Year_Rates", figure = {}), 
                dcc.RangeSlider(
                    id = "Range_Slider",
                    min = unixTimeMillis(df["Date"].min()),
                    max = unixTimeMillis(df["Date"].max()),
                    value = [unixTimeMillis(df["Date"].min()),
                             unixTimeMillis(df["Date"].max())],
                ),
             html.Div(id="Output_Range_Slider")
])

@app.callback(
    Output("Output_Range_Slider", "children"),
    [Input("Range_Slider","value")]
)
def update_RangeSlider(year_range):
    return "From {} to {}".format(unixToDatetime(year_range[0]),
                                  unixToDatetime(year_range[1]))

@app.callback(
    Output("Historic_US_1_Year_Rates", "figure"),
    [Input("Range_Slider","value")]
)
def update_Graph(Date_Chosen):
    filtered_df = df[(df["Date"] >= unixToDatetime(Date_Chosen[0])) & (df["Date"] <= unixToDatetime(Date_Chosen[1]))]
    return {
        "data":[
            go.Scatter(
            x = filtered_df["Date"],
            y = filtered_df["1 Year Rate"],
            mode = "lines+markers",
            marker = {"size":1}
            )
        ],
        "layout":go.Layout(
        title = "Historic 1 Year Rates"
        )
    }

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

The dataframe looks like this:

           Date  1 Year Rate
0    1970-01-02         8.34
1    1970-01-09         8.18
2    1970-01-16         8.00
3    1970-01-23         8.04
4    1970-01-30         8.15
...         ...          ...
2672 2021-03-19         0.07
2673 2021-03-26         0.07
2674 2021-04-02         0.06
2675 2021-04-09         0.06
2676 2021-04-16         0.06

[2677 rows x 2 columns]
Date           datetime64[ns]
1 Year Rate           float64
dtype: object

And the output looks like this:

Historic 1 Year Rates

Thank you for your help!

EDIT: Nevermind, this problem is solved by using the Plotly.Express library

How do I remove the timestamp without breaking dcc.RangeSlider?

0 Answers0