Me gustaría usar chart.js para graficar datos de una base de datos SQLite consultada con PHP. Probé varios tutoriales en línea, pero mi gráfico nunca se completa con ellos y la mayoría de las veces simplemente desaparece. Nunca he usado PHP antes y estoy muy confundido con lo que estoy haciendo. La mayoría de los tutoriales de los que estoy tratando de aprender hacen eco de las filas de la base de datos, pero necesito pasarlas a JavaScript para que se representen gráficamente. No sé si será de mucha ayuda, pero aquí está mi código:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script> <title>Graph</title> </head> <body> <div> <canvas id="myChart"></canvas> </div> <?php $dir = 'sqlite:/home/pi/AQUASOLAR/SHT30/log_db/db.sht.6.db'; $dbh = new PDO($dir) or die("cannot open the database"); $query = "SELECT * FROM READING"); foreach ($dbh->query($query) as $row) { //$r0 = $row[0]; $r0 = $row[0] } $dbh = null; ?> <script> //from db var r0 = <?php echo $r0?> var Temp = [1,2,3]; //y axis var Humi = [4,5,6]; //y2 axis var Itn = [r0]; //x axis var graph = document.getElementById("myChart"); var line_graph = new Chart(graph, { type: 'line', data: { labels: Itn, datasets: [ { data: Temp, }, { data: Humi, } ], }, options: { scales: { x: { ticks: { //display: false }, }, }, }, }); </script> </body> </html>Si alguien puede darme algunos consejos, sería genial, he tenido dificultades para encontrar tutoriales para este. ¡Gracias!
Puedes hacer algo como esto:
getData.php :
$dir = 'sqlite:/home/pi/AQUASOLAR/SHT30/log_db/db.sht.6.db'; $dbh = new PDO($dir) or die("cannot open the database"); $query = "SELECT * FROM READING"); $r0 = Array(); foreach ($dbh->query($query) as $row) { $r0 = $row[0]; } $dbh = null; echo json_encode($r0); index.html
<!DOCTYPE html> <html lang="en"> .. <body> <script> // include jquery $.ajax({ url: './getData.php', type: 'GET', success: (data) => { const parsed = JSON.parse(data); // Use parsed to create your chart }, error: (err) => { alert(err); } }); </script> </body> </html>Este es solo un ejemplo de la lógica que utilizo para resolver el problema. Tal vez hay algún error de sintaxis