Update scatter plots problem

plotly.js
1

Hello,

I’m writting a Plotly dashboard GitHub - scls19fr/krp_telemetry: Kart Racing Pro Telemetry Analyser with HTML/CSS/JS (available at KRP Telemetry )
Unfortunately when I change value in Analyse tab / Select a lap my scatter plots doesn’t update.

My lap_change function looks like

      function lap_change(selected_lap) {
        console.log("lap_change(" + selected_lap + ")");
        selected_lap = Number(selected_lap);
        df_lap = df_data.loc({
          rows: df_data["Lap"].eq(selected_lap)
        }); // select data from a given lap
        parameters.forEach(function(parameter) {
          let plot = document.getElementById("map_div_" + parameter);
          if (["LatAcc", "LonAcc", "Steer", "YawVel"].includes(parameter)) {
            colorscale = "RdBu";
          } else {
            colorscale = "YlOrBr";
          }
          trace = {
            x: df_lap[config.x].values,
            y: df_lap[config.y].values,
            type: 'scatter',
            mode: 'lines+markers',
            name: lap,
            marker: {
              colorscale: colorscale,
              color: df_lap[parameter].values
            }
          };
          //Plotly.deleteTraces(plot, 0);
          //Plotly.restyle(plot, [trace]);
          Plotly.update(plot, [trace], {}, [0]);
        });
      }

I don’t understand why scatter plots doesn’t update.

I’m quite new to JS so some help will be very nice.

Kind regards

2

Here is a minimal (non) working example which shows my problem of updating a PlotlyJS plot.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MWE</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
    <script>
      function create_barplot_laptimes() {
        config = {
              x: "Lap",
              y: "Laptime"
        };
        layout = {
          xaxis: {
            title: config.x,
          },
          yaxis: {
            title: config.y,
          },
        };
        trace = {
          x: [0, 1, 2, 3, 4, 5],
          y: [50.1, 45.1, 49.1, 55.1, 47.1, 46.1],
          type: 'bar',
        };
        Plotly.newPlot("barplot_laptimes_div", [trace], layout, config);
      }
      function update_barplot_laptimes() {
        console.log("update");
        config = {
              x: "Lap",
              y: "Laptime"
        };
        layout = {
          xaxis: {
            title: config.x,
          },
          yaxis: {
            title: config.y,
          },
        };
        trace = {
          x: [0, 1, 2, 3, 4, 5],
          y: [40.1, 55.1, 49.1, 55.1, 47.1, 26.1],
          type: 'bar',
        };
        //Plotly.update("barplot_laptimes_div", [trace], layout, config);
        Plotly.update("barplot_laptimes_div", [trace], {}, [0]);
      }

      (function(window, document, undefined) {
        // code that should be taken care of right away
        window.onload = init;

        function init() {
          console.log("init");
          create_barplot_laptimes();
        }
      })(window, document, undefined);
    </script>
    <h1>MWE</h1>
    <button id="update-button" onclick="update_barplot_laptimes()">Update</button>
    <div id="barplot_laptimes_div"></div>
  </body>
</html>

Some help will be very nice.

Kind regards

3

I think I fixed it

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MWE</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
    <script>
      function create_barplot_laptimes() {
        config = {
              x: "Lap",
              y: "Laptime"
        };
        layout = {
          xaxis: {
            title: config.x,
          },
          yaxis: {
            title: config.y,
          },
        };
        trace = {
          x: [0, 1, 2, 3, 4, 5],
          y: [50.1, 45.1, 49.1, 55.1, 47.1, 46.1],
          type: 'bar',
        };
        Plotly.newPlot("barplot_laptimes_div", [trace], layout, config);
      }
      function update_barplot_laptimes() {
        console.log("update");
        config = {
              x: "Lap",
              y: "Laptime"
        };
        layout = {
          xaxis: {
            title: config.x,
          },
          yaxis: {
            title: config.y,
          },
        };
        trace = {
          x: [[0, 1, 2, 3, 4, 5]],
          y: [[40.1, 55.1, 49.1, 55.1, 47.1, 26.1]],
          type: 'bar',
        };
        //Plotly.update("barplot_laptimes_div", [trace], layout, config);
        //Plotly.update("barplot_laptimes_div", [trace], {}, [0]);
        Plotly.restyle("barplot_laptimes_div", trace);
      }

      (function(window, document, undefined) {
        // code that should be taken care of right away
        window.onload = init;

        function init() {
          console.log("init");
          create_barplot_laptimes();
        }
      })(window, document, undefined);
    </script>
    <h1>MWE</h1>
    <button id="update-button" onclick="update_barplot_laptimes()">Update</button>
    <div id="barplot_laptimes_div"></div>
  </body>
</html>

but I don’t understand difference between Plotly.restyle and Plotly.update