plotly.rs icon indicating copy to clipboard operation
plotly.rs copied to clipboard

Real time plotting

Open donkeyteethUX opened this issue 3 years ago • 5 comments

Thanks for the great library! Is there a good way to rapidly update plots for displaying realtime data? Looks like I can call plot.show() repeatedly, but that seems pretty sub-optimal.

donkeyteethUX avatar Oct 12 '20 23:10 donkeyteethUX

I'm not sure how to implement dynamic updating; never had the need for it in my work. If anyone has ideas you're welcome to pitch in.

igiagkiozis avatar Jul 14 '21 18:07 igiagkiozis

Wouldn't this be possible following a similar approach to Plotly Dash (i.e. using callbacks)? I would assume that using any of the reactive rust frameworks (e.g. Dioxus, Sycamore, LeptOS) should allow for this.

jojayaro avatar Apr 23 '23 17:04 jojayaro

I found a way to update plots similar to Dash callbacks. If you use HTMX polling feature and a framework like Actix, you can route your request to first load the plot to the div, and then every so often to update just the graph. Basically the /plot route should return the string like this

#[get("/plot")]
async fn line_plot() -> String {
...
    plot.to_inline_html(Some("div"))
}

and to update just the data you should call the Plotly.update function with the new data.

#[get("/plot_update")]
async fn line_plot_update() -> String {

let newdata = function_data()

    format!("
    <script type=\"text/javascript\">
    var data = {{
        x: [newdata],
        y: [newdata]
        }};
    Plotly.update(\"div2\", data);
    </script>
    ")
}

Then in your HTML you can call it this way, note that you require an initial load and then call the update (in my case 60s)

<div hx-get="/plot" hx-trigger="load"></div>
<div hx-get="/plot_update" hx-trigger="every 60s"></div>

jojayaro avatar May 03 '23 17:05 jojayaro

I found a way to update plots similar to Dash callbacks

Are you still being in this program? I am facing the similar problem now, I read a littile of the code from Dash.jl, and found the package has less than 2000 lines code. So I thought implement the dash foundamental function would not be that much complicated. But being totaly new to front-end programming for now, I just can't figure out how to get the section (with using yew) of callback function out of the generated .html from plotly. Are you interested in implementing dash in plotly.rs? Or could you give me a few guidance so I can start to make a new pr to do it?

baiguoname avatar Oct 02 '23 11:10 baiguoname

I found a way to update plots similar to Dash callbacks

Are you still being in this program? I am facing the similar problem now, I read a littile of the code from Dash.jl, and found the package has less than 2000 lines code. So I thought implement the dash foundamental function would not be that much complicated. But being totaly new to front-end programming for now, I just can't figure out how to get the section (with using yew) of callback function out of the generated .html from plotly. Are you interested in implementing dash in plotly.rs? Or could you give me a few guidance so I can start to make a new pr to do it?

I haven’t had time to continue, I did a small example but I stopped using this crate and just provided the plotly js code directly.

HTMX makes this very easy because you just call the endpoint and return the HTML/JS and HTMX updates the page. In my case sending the updated data to refresh the graph every minute.

I also have an example on how to capture the graph data and return it to the server.

To be honest it does not make sense to replicate Dash (ie React) having something like HTMX/Actix available.

I don’t have much time or expertise but I’m interested in helping.

https://github.com/jojayaro/jayaro_dev

jojayaro avatar Oct 28 '23 18:10 jojayaro