Tengo una función que alimenta un gráfico con datos fijos:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Date', 'CPU Temp'], ['2004', 340], ['2005', 460], ['2006', 1120], ['2007', 540] ]); } Me gustaría reemplazar los datos fijos con los que se leen de una tabla de base de datos que contiene dos columnas: date y temperature . Los datos leídos se almacenan en la variable $json :
[ {"datain":"2021-04-20 12:00:03","temp":"39.2"}, {"datain":"2021-04-21 00:00:05","temp":"40.2"}, {"datain":"2021-04-21 12:00:03","temp":"40.8"}, {"datain":"2021-08-01 12:00:12","temp":"47.2"} ]Aquí está mi código incorrecto:
let date= ""; let temp = ""; for (let i = 0; i < <?php echo count($json)?>; i++){ date = <?php echo $json[0] ?>; temp = <?php echo $json[1] ?>; } function drawChart() { var data = google.visualization.arrayToDataTable([ ['Date', 'CPU Temp'], [date, temp] ]); }¿Cómo puedo hacer que esto funcione?
EDITAR: Código después de ser editado con las sugerencias de @trincot:
< script type = "text/javascript" > google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Date', 'Temp'], ...<?php echo $json; ?>.map(({ datain, temp }) => [new Date(datain), parseFloat(temp)]) ]); var options = { title: 'CPU Temp History', curveType: 'function', legend: { position: 'bottom' } }; var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); chart.draw(data, options); } < /script>El código original está aquí: código de gráfico
Dado que su $json es una matriz de objetos con dos propiedades, deberá convertir eso en una matriz de matrices (pares):
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Date', 'CPU Temp'], ...<?php echo $json; ?>.map(({datain, temp}) => [new Date(datain), +temp]) ]); } Así que esto simplemente inyecta todo el JSON dentro del literal de matriz que se proporciona como argumento para arrayToDataTable . La llamada .map convierte los objetos planos en pares y:
DateCuando mira la fuente a través de su navegador, debería ver algo como esto:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Date', 'CPU Temp'], ...[{"datain":"2021-04-20 12:00:03","temp":"39.2"},{"datain":"2021-04-21 00:00:05","temp":"40.2"},{"datain":"2021-04-21 12:00:03","temp":"40.8"},{"datain":"2021-08-01 12:00:12","temp":"47.2"}].map(({datain, temp}) => [new Date(datain), +temp]) ]); }