ApexCharts setInterval updateOptions jak połączyć z php, aby dynamicznie odświeżał dane z bazy

Question

Witajcie, natrafiłam na problem i nie potrafię, tego przeskoczyć mianowicie dostaje do bazy dane z czujnika temp, prądu itp. i chciałam, żeby dane były dynamicznie wyświetlane w ApexCharts i po wielu poszukiwaniach i próbach utknęłam jak przekazać pobrane dane do apex, mam obecnie tak:

var widgetChart1 = function() {
                        var options = {
                            series: [{
                                name: "",
                                data: []
                            }],
                            chart: {
                                id: 'realtime',
                                height: 400,
                                type: 'line',
                                animations: {
                                    enabled: true,
                                    easing: 'linear',
                                    dynamicAnimation: {
                                        speed: 1000
                                    }
                                },
                                toolbar: {
                                    show: false,
                                },
                                zoom: {
                                    enabled: false
                                },
                                toolbar: {
                                    show: false
                                },
                                // sparkline: {
                                //     enabled: true
                                // }
                            },
                            dataLabels: {
                                enabled: false
                            },
                            stroke: {
                                show: true,
                                width: 4,
                                curve: 'smooth',
                                colors: ['#43DC80'],
                            },
                            colors: ['#43DC80'],
                            title: {
                                text: undefined,
                                align: 'left'
                            },
                            grid: {
                                strokeDashArray: 5,
                                row: {
                                    colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                                    opacity: 0
                                },


                            },
                            yaxis: {
                                show: true,
                            },
                            xaxis: {

                                categories: [],
                                axisBorder: {
                                    show: false
                                },
                                axisTicks: {
                                    show: false
                                },

                                labels: {

                                    show: false
                                },
                                tooltip: {
                                    enabled: false
                                }

                            },
                            tooltip: {
                                style: {
                                    fontSize: '16px',
                                },
                                y: {
                                    formatter: function(val) {
                                        return val + " Kwh"
                                    }
                                }
                            }

                        };

                        var chart = new ApexCharts(document.querySelector("#widgetChart1"), options);
                        chart.render();

                        setInterval(() => {
                            chart.updateOptions({
                                xaxis: {
                                    categories: <?php echo json_encode($data); ?>,
                                },
                                series: [{
                                    data: <?php echo json_encode($Wh); ?>,
                                }],
                            });                            
                        }, 2000)
                    }

i teraz tak jak na sztywno sobie sprawdzam chart.updateOptions wszystko działa tj aktualizuje teraz jedynie nie potrafię sobie poradzić, jak pobrać dane z bazy co np. 2 sek i przekazać je do zmiennych, mam tak

$sql = "SELECT `napiecie`, `ampery`, `temp`, `Wh`, `data` FROM `dom_czasowy` GROUP BY data ORDER BY data LIMIT 40;";
$result = mysqli_query($con, $sql);
$napiecie=[];
$ampery=[];
$temp=[];
$Wh=[];
$data=[];
while ($row = mysqli_fetch_array($result)) {
    $napiecie[] = $row['napiecie'];
    $ampery[] = $row['ampery'];
    $temp[] = $row['temp'];
    $Wh[] = $row['Wh'];
    $data[] = $row['data'];
}
echo print_r($Wh);

i ładnie mi wszystko wyciąga jak sprawdziłam np: echo print_r($Wh);

A żeby pobierał w interwale czasowym to zrobiłam tak

 $(document).ready(function() {
            setInterval(function() {
                $("#testowy").load("testowy.php");
refresh();
            }, 1000);
        });

w pliku testowy.php mam

<?php

include('db.php');

$sql = "SELECT `napiecie`, `ampery`, `temp`, `Wh`, `data` FROM `dom_czasowy` GROUP BY data ORDER BY data LIMIT 40;";
$result = mysqli_query($con, $sql);
$napiecie=[];
$ampery=[];
$temp=[];
$Wh=[];
$data=[];
while ($row = mysqli_fetch_array($result)) {
    $napiecie[] = $row['napiecie'];
    $ampery[] = $row['ampery'];
    $temp[] = $row['temp'];
    $Wh[] = $row['Wh'];
    $data[] = $row['data'];
}

?>

i teraz nie wiem czemu pomimo tego, że co 1 sek są odbierane dane nie, są przekazywane do <?php echo json_encode($Wh); ?>  oraz <?php echo json_encode($data); ?> w chart.updateOptions

 

<body>
<div id="testowy"></div>

<div id="widgetChart1" class="timeline-chart"></div>
</body>

Jak to powinnam zrobić??

Jak zawsze będę wdzięczna za podpowiedzi i sugestie.

Answer 1

co robi funkcja refresh()  ?  po co ładujesz dane do div?

problem chyba polega na tym że co 2 sekundy próbujesz aktualizować wykres danymi których nie ma, a co 1 sek. wywołujesz load do div z danymi.

Użyj AJAX to lepsze podejście IMO niż load

 

 Może spróbuj tak że w testowy.php zakoduj dane do JSON: 

echo json_encode(array(
    'data' => $data,
    'Wh' => $Wh
));

zamiast load użyj ajax

$(document).ready(function() {
    setInterval(function() {
        $.ajax({
            url: "testowy.php",
            method: "GET",
            dataType: "json",
            success: function(response) {
                chart.updateOptions({
                    xaxis: {
                        categories: response.data,
                    },
                    series: [{
                        data: response.Wh,
                    }],
                });
            }
        });
    }, 2000);
});

 

Comments

Dzięki wielkie za podpowiedz tego szukałam :)