Me gustaría que mi gráfico de Plotly se actualice automáticamente cada 1 segundo al leer los datos de un archivo CSV en línea.
Esto es lo que tengo hasta ahora:
<!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> Aunque los datos y se imprimen en la consola, el gráfico no se actualiza.
Mi script se basa en estos dos tutoriales:
Pregunta adicional: ¿hay alguna forma de actualizar automáticamente el gráfico cada vez que se actualizan los datos en el documento CSV? Es decir, sin tener que recorrer cada segundo.
En su código, read_data() devuelve undefined . También programa processData() para que se ejecute más tarde, y esa función devuelve algunos datos, pero fue llamado por el tiempo de ejecución de JavaScript que ignora este valor devuelto.
Podría pegar el código Plotly.restyle(... en una función que llama a processData, o podría pegar ese código dentro de processData. Consulte el ejemplo de código a continuación.
Sin embargo, hay otro problema aquí (observe que el ejemplo de código a continuación falla). Este archivo no puede ser cargado por una página del navegador en este momento. Los enlaces de hojas de Google como https://docs.google.com/spreadsheets/d/e/2PACX-1vTkbRgvvBwM0tMheEziQC4ldtYoMVCgIek67Y5Lcjnu1WH0tTLLCzJPse-pL5OTR9U58Gk8VBD65L3u/pub?gid=0&single=true&output=csv ya no funcionan en el navegador desde hace aproximadamente 18 meses.
Deberá usar otro método para obtener sus datos en una página web (consulte las preguntas vinculadas arriba para obtener algunas sugerencias).
<!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>