Plot x value after a mouse click in Plotly

Question

I would like to create a candle simulator where the next value is plotted after an event (mouse click or timer).

Instead of showing the whole plot, unshadow the next value on demand (aka append a new value).

The interactive plotly graph allows to interact with different plots.
Interactive mouse click gives the coordinates of the mouse position. this is not the desired result

I tried to update the graph adding next value and plot.show() again, which creates a new graph (windows).

This should work with any graph, but giving an ohlc with ema indicator as an example:

import plotly.graph_objects as go
import pandas as pd
import plotly.express as px

df2 =df(0) 
fig = go.Figure()  
fig.add_trace(go.Ohlc(x=df2.index, open=df2['Open'], high=df2['High'], low=df2['Low'], close=df2['Close'],name='plot1'))
fig.add_trace(go.Scatter(x=df2.index, y=df2['ema13'],opacity=0.7, line=dict(color='blue', width=2),name='plot2'))
fig.update_layout(xaxis_rangeslider_visible=False)
fig.show()
for i in len(df):
    input("Press enter to continue")
    df2.append(df(i))
    fig.update_traces(x=df2.index, open=df2['Open'], high=df2['High'], low=df2['Low'], close=df2['Close'],name='plot1')
    fig.update_traces(x=df2.index, y=df2['ema13'],opacity=0.7, line=dict(color='blue', width=2),name='plot2')
    fig.show()'

StephanT · Accepted Answer · 2023-07-04 09:13:27Z

0

You mention that you tried updating the graph. To improve the question, please share a minimal reproducible example (including dummy data), so we can evaluate how much additional info you need.

The solution lies in defining an update event and change fig.data. Connect this function to either an onclick on Python, or a timer. This code starts with the first datapoint. Then you need to click on the graph (any datapoint) to add the next.

import plotly.graph_objects as go
import pandas as pd

fig = go.FigureWidget()

ix_max = 1

df = pd.DataFrame({'x':[1, 2, 3], 'y':[10, 11, 12]})

fig.add_trace(go.Scatter(x=df['x'][:ix_max],
                         y=df['y'][:ix_max],
                         name='trace1'))

def update_graph(trace, points, state):

    global ix_max

    ix_max += 1

    with fig.batch_update():

        fig.update_traces(
            x=df['x'][:ix_max],
            y=df['y'][:ix_max],
            selector=dict(name='trace1'))  # this changes x and y of the trace named here. Otherwise all traces are affected

# This next part makes sure it works regardless of which trace is on top
for i in range(len(fig.data)):
    f = fig.data[i]
    f.on_click(update_graph)

fig

answered Jul 4, 2023 at 9:13

StephanT

8336 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Almodius Over a year ago

Thank you for your answer. Your approach is similar to mine but yours seems more correct at first glance. unfortunately not sure I am getting the expected results. does your code plot the graph? when adding the fig.show (to show in a browser) it doesn't loop Edited my initial question with my full code. In my case the problem is that a new plot is open everytime

StephanT Over a year ago

Your method is a bit ... brute-forced ;-) My code displays the graph by calling fig. I'm running in VS Code, and I don't output to the browser. The fig.show() indeed creates a new graph each time, which is correct behavior for the command, especially inside the loop. I do notice that I cannot get it working in the browser either. I will look a bit more into it, but I think it has to do with the browser being a full HTML "render" without the supporting Python code. So it loses the connection.

StephanT Over a year ago

community.plotly.com/t/…

Almodius Over a year ago

"brute forced" sounds elegant, I saw it answering the question although knowing it is not correct. I am using browser as default but any other way of presenting the plot will do. Also using VS code but when executing it plots the graph in the browser

StephanT Over a year ago

you can force the output renderer by fig.show(renderer="vscode") Also see stackoverflow.com/questions/64849484/…

|

Collectives™ on Stack Overflow

Plot x value after a mouse click in Plotly

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related