0

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?

4
  • No coloques cada valor dentro de un nuevo arreglo $labels[] = array( $row['dt'] ); simplemente agrega el valor $labels[] = $row['dt'];. Lo mismo para $data.
    – Triby
    el 2 mar. 2021 a las 21:05
  • entiendo, ya he modificado el código, ahora es como llevarlos al script para reemplazar las consultas. el 2 mar. 2021 a las 21:53
  • Después de cargar los datos actualiza la gráfica
    – Triby
    el 2 mar. 2021 a las 23:50
  • Una consulta, como podría hacer que mi array se vea así, [ { "labels": 25 feb 2021, "data": 618.40 }, { "labels": 26 feb 2021, "data": 724.00 }] el 3 mar. 2021 a las 3:35

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.