Estoy teniendo un problema para poder utilizar los datos del array en el gráfico.
Actualmente estoy utilizando este script para mostrar los datos en un gráfico con apexcharts, los datos se muestran correctamente, pero el problema viene cuando tengo que actualizar la página para que se actualice el gráfico.
En el script uso un php con una sentencia de base de datos para obtener los resultados y pasarlos a las etiquetas series y labels.
<script type="text/javascript">
var options = {
series: [{
name:"Revenue",
data:[
<?php
$sql = $conn->runQuery("SELECT Date_format(date, '%d %b %Y') AS dt, SUM(amount) AS total FROM details GROUP BY DAY(date) ORDER BY date ASC");
$sql->execute();
while ($row = $sql->fetch(PDO::FETCH_ASSOC))
{
?>
"<?php echo $row['total'] ?>",
<?php } ?>
]
}],
chart: {
type: 'area',
height:480,
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
labels:[
<?php
$sql2 = $conn->runQuery("SELECT Date_format(date, '%d %b %Y') AS dt, SUM(amount) AS total FROM details GROUP BY DAY(date) ORDER BY date ASC");
$sql2->execute();
while ($row2 = $sql2->fetch(PDO::FETCH_ASSOC))
{
?>
"<?php echo $row['dt'] ?>",
<?php } ?>
],
xaxis: {
type: 'datetime',
},
legend:{
offsetY:7
},
grid:{
padding:{
bottom:20
}
},
yaxis: {
opposite: true,
},
legend: {
horizontalAlign: 'left'
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
Para hacerlo dinámico, tengo un PHP donde paso los datos a JSON y luego los leo con el script, actualizando así los datos sin refrescar la página.
<?php
$labels = array();
$data = array();
$sql = $conn->runQuery("SELECT Date_format(date, '%d %b %Y') AS dt, SUM(amount) AS total FROM details GROUP BY DAY(date) ORDER BY date ASC");
$sql->execute();
while ($row=$sql->fetch(PDO::FETCH_ASSOC))
{
$labels[] = $row['dt'];
$data[] = $row['total'];
}
$posts = [
"labels" => $labels,
"data" => $data,
];
echo json_encode($posts);
?>
Este es el resultado:
{
"labels": [
"25 feb 2021",
"26 feb 2021",
"27 feb 2021",
"28 feb 2021",
"01 mar 2021"
],
"data": [
"618.40",
"724.00",
"1298.00",
"777.60",
"6033.50"
]
}
Estoy investigando pero no encuentro cómo pasar ese array a mi script y mostrar los datos en el gráfico, ¿me pueden ayudar por favor?
$labels[] = array( $row['dt'] );
simplemente agrega el valor$labels[] = $row['dt'];
. Lo mismo para$data
.