plotly / plotly.rs

Plotly for Rust
https://docs.rs/plotly
MIT License
1.01k stars 98 forks source link

Real time plotting #32

Open donkeyteethUX opened 3 years ago

donkeyteethUX commented 3 years ago

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.

igiagkiozis commented 2 years ago

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.

jojayaro commented 1 year ago

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 commented 1 year ago

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>
baiguoname commented 9 months ago

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?

jojayaro commented 8 months ago

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