Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Real time plotting #32

Open
donkeyteethUX opened this issue Oct 12, 2020 · 5 comments
Open

Real time plotting #32

donkeyteethUX opened this issue Oct 12, 2020 · 5 comments

Comments

@donkeyteethUX
Copy link

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
Copy link
Collaborator

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
Copy link

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
Copy link

jojayaro commented May 3, 2023

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
Copy link

baiguoname commented Oct 2, 2023

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants