How to change the precision of a datetime in clickData?

Dash Python
1

HI!
I am having troubles rendering display- and clickData. I have a dataframe with a datetime64 time and 6 digits for precision (ie 2023-07-07 20:12:56.123456).

When I try to print clickData, I have 2 digits missing: 2023-07-07 20:12:56.1234.
My goal is to print the other values of my dataframe with this index. But I can’t with this precision.
Here is a little code to demonstrate my problem:

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


value_x = [pd.to_datetime('2023-07-06 14:56:36.956215')]
value_y = [2]

df = pd.DataFrame({'time': value_x, 'value': value_y})

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(
        id='time-series-graph',
        figure=px.scatter(df, x='time', y='value', title='test')
    ),
    html.Div(id='output-div')
])


@app.callback(
    Output('output-div', 'children'),
    [Input('time-series-graph', 'clickData')]
)
def display_click_data(clickData):
    if clickData is not None:
        x_value = clickData['points'][0]['x']
        return f'You clicked on {x_value}'
    else:
        return 'NO data'


if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0')

The output is:
You clicked on 2023-07-06 14:56:36.9562

So the question is, is there a way to change the precision? If not, how to get around this problem?

Thanks in advance.

2

Hey @Psykozz09,

First and foremost Welcome to the community!

Not sure how to change the precision of click output. However, you can approach the problem from the other side:

Why don’t you try changing the precision of your data frame index. According to him the fastest way would be to write a function something like this one:

def format_time():
    t = datetime.datetime.now()
    s = t.strftime('%Y-%m-%d %H:%M:%S.%f')
    return s[:-3]

pd.Series(df.index).apply(format_time)  #remember indexes are np.arrays not pd.Series as columns!

Cheers!

2 Likes
3

Hi @Psykozz09
Welcome to the community. I think you could try to add hover_name as time in your fig then change the clickData['points'][0]['x'] to clickData['points'][0]['hovertext']

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

value_x = [pd.to_datetime('2023-07-06 14:56:36.956215')]
value_y = [2]

df = pd.DataFrame({'time': value_x, 'value': value_y})
df['time'] = df['time'].astype(str)
app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(
        id='time-series-graph',
        figure=px.scatter(df, x='time', y='value', title='test', hover_name="time")
    ),
    html.Div(id='output-div')
])

@app.callback(
    Output('output-div', 'children'),
    [Input('time-series-graph', 'clickData')]
)
def display_click_data(clickData):
    if clickData is not None:
        x_value = clickData['points'][0]['hovertext']
        print(x_value)
        return f'You clicked on {x_value}'
    else:
        return 'NO data'


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

Screenshot 2023-11-22 140929
Screenshot 2023-11-22 1409291101×562 12 KB

1 Like
4

Hi @Berbere and thanks for your reply!
I would like to change this precision but I can’t. I have data that varies by a few microseconds.

5

Hi @hoatran and thank you too for your reply.
I tried your solution and it worked perfectly, I didn’t know about this parameter. I just adapted it to a go.Figure with go.Scatter. I have good values now! go.Scatter has a similar parameter named text that does the same thing (I didn’t know it did that)

1 Like