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?
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!
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)
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)