Estoy intentando cargar un archivo csv compuesto por dos columnas, tiempo y temperatura, desde mi raspberry pi y hacer un gráfico con chartjs. En algún tutorial encontré que podía hacer eso con d3 pero parece que estoy haciendo algo mal con las promesas.
var csv = ` 21:34:03,17.25 21:35:04,17.18 21:36:03,17.18 21:37:03,17.18 21:38:03,17.18 21:39:03,17.18 21:40:03,17.18 21:41:03,17.12 21:42:03,17.18 21:43:03,17.12 21:44:03,17.12 21:46:03,17.12 21:47:02,17.12 21:48:03,17.12 21:49:02,17.12 21:50:03,17.06 21:51:03,17.06 21:52:03,17.06 21:53:03,17.06 21:54:03,17.06 21:55:04,17.06 21:56:03,17.06 21:57:02,17.06 21:58:03,17.06 22:00:04,17.00 22:01:02,17.00`; //couldn't find a way to embed the csv into the text function for the snippet d3.text("temp.csv").then(makeChart); function makeChart(temp) { var result = "x, y\n" + temp; //now you have the header var datos = d3.csvParse(result); var chart = new Chart('chart', { type: 'line', data: { labels: datos.x, datasets: [{ data: datos.y }] } }); console.log(this.chart.data); return this.chart; } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <canvas id="chart" width="400" height="400"></canvas>Datos de muestra (se supone que es temp.csv):
21:34:03,17.25 21:35:04,17.18 21:36:03,17.18 21:37:03,17.18 21:38:03,17.18 21:39:03,17.18 21:40:03,17.18 21:41:03,17.12 21:42:03,17.18 21:43:03,17.12 21:44:03,17.12 21:46:03,17.12 21:47:02,17.12 21:48:03,17.12 21:49:02,17.12 21:50:03,17.06 21:51:03,17.06 21:52:03,17.06 21:53:03,17.06 21:54:03,17.06 21:55:04,17.06 21:56:03,17.06 21:57:02,17.06 21:58:03,17.06 22:00:04,17.00 22:01:02,17.00No sé qué más agregar, pero la única solución que encontré fue deshacerme de d3 por completo, aunque me gustaría entender cómo usar sus promesas en este ejemplo.
Tu promesa está bien (es decir d3.text("temp.csv").then(makeChart); ) pero tu lógica en makeChart tiene algunos problemas:
, y y en el encabezado que agregue; de lo contrario, está creando una clave de objeto como esta " y" en lugar de solo yy deben convertirse a flotantes porque csvParse valores predeterminados como texto sin una función de conversióndatos.x y datos.y no hacen referencia a nada, ya que datos no tiene claves x e y específicas; es una matriz de objetos, cada uno de los cuales tiene claves x e y . Entonces, puede usar el map para extraer las matrices de esas clavesEjemplo de trabajo a continuación:
var url = "https://gist.githubusercontent.com/robinmackenzie/ff787ddb871cef050d7e6279991a0f07/raw/4ce35de3a9bef27363d83e7da2f3365ffa8d2345/data.csv"; d3.text(url) .then(csv => makeChart(csv)) function makeChart(temp) { // add the header (no space between , and y var result = "x,y\n" + temp; //now you have the header // csv parse - need to convert y values to float var datos = d3.csvParse(result, d => { return { x: dx, y: parseFloat(dy) } }); // render chart var chart = new Chart('chart', { type: 'line', data: { labels: datos.map(d => dx), // <-- just get x values datasets: [{ data: datos.map(d => dy) // <-- just get y values }] } }); } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script> <canvas id="chart" width="400" height="100"></canvas>