Git Product home page Git Product logo

Comments (5)

jojayaro avatar jojayaro commented on May 23, 2024 2

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>

from plotly.rs.

igiagkiozis avatar igiagkiozis commented on May 23, 2024

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.

from plotly.rs.

jojayaro avatar jojayaro commented on May 23, 2024

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.

from plotly.rs.

baiguoname avatar baiguoname commented on May 23, 2024

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?

from plotly.rs.

jojayaro avatar jojayaro commented on May 23, 2024

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

from plotly.rs.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.