Plotly js live update from online data

Question

I would like my Plotly graph to update automatically every 1 seconds by reading data from an online CSV file.

This is what I have so far:

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <div id="graph"></div>
    <script>
      function read_data() {
        d3.csv(
          "https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv",
          function (data) {
            processData(data);
          }
        );
      }

      function processData(allRows) {
        console.log(allRows);
        var x = [];
        var y = [];

        for (var i = 0; i < allRows.length; i++) {
          row = allRows[i];
          x.push(row["x"]);
          y.push(row["y"]);
        }
        console.log("Y", y);
        return y;
      }

      Plotly.newPlot(graph, [
        {
          y: [1, 2, 3],
          mode: "lines",
          line: { color: "#80CAF6" },
        },
      ]);

      var interval = setInterval(function () {
        Plotly.restyle(
          graph,
          {
            y: [[read_data()]],
          },
          [0]
        );
      }, 1000);
    </script>
  </body>
</html>

Although the y data is printed in the console, the plot is not updated.

My script is based on these two tutorials:

Additional question: is there a way to automatically update the graph each time the data is updated in the CSV document? That is, without having to loop over each second.

score 0 · Answer 1 · answered Feb 03 '22 at 16:17

In your code, read_data() returns undefined. It also schedules processData() to run later, and that function returns some data, but it was called by the JavaScript runtime which ignores this returned value.

You could stick the Plotly.restyle(... code in a function that processData calls, or you could stick that code inside processData. See the code sample below.

However, there's another issue here (watch the code sample below fail). This file can't be loaded by a browser page right now. Google sheets links like https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv no longer work in the browser as of about 18 months ago.

You'll need to use another method to get your data into a web page (see linked questions above for some suggestions).

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <div id="graph"></div>
    <script>
      function read_data() {
        d3.csv(
          "https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv",
          function (data) {
            processData(data);
          }
        );
      }

      function processData(allRows) {
        console.log(allRows);
        var x = [];
        var y = [];

        for (var i = 0; i < allRows.length; i++) {
          row = allRows[i];
          x.push(row["x"]);
          y.push(row["y"]);
        }
        console.log("Y", y);
        
        Plotly.restyle(
          graph,
          {
            y: y,
          },
          [0]
        );
      }

      Plotly.newPlot(graph, [
        {
          y: [1, 2, 3],
          mode: "lines",
          line: { color: "#80CAF6" },
        },
      ]);

      var interval = setInterval(read_data, 1000);
    </script>
  </body>
</html>

Thanks! I tried your code with both a local (`"data.csv"`) or a github hosted file (https://raw.githubusercontent.com/cnftstats/test/main/data.csv) and it still keeps ignoring the data. Not sure what the issue is — mat, Feb 03 '22 at 19:04
You'll need to serve CORS headers, see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS Neither GitHub nor a file:// url will have these headers. — Thomas, Feb 05 '22 at 18:44

Plotly js live update from online data

1 Answers1