Goedendag,
ik ben weer aan het stoeien met een stukje code om een grafiek van highcharts goed op het scherm te krijgen.
Ik probeer met de functie add.point elke 30 seconden nieuwe data toe te voegen. Dat doe ik mbv een ajax call.

De functie setinterval werkt, wanneer ik in Chrome deze code start wordt elke 10 seconden de PHP aangeroepen. Maar toch wordt de grafiek niet aangevuld, Ik denk omdat de variabelen x en y niet goed gevuld worden.


chart: {
    events: {
        load: function () {
            // set up the updating of the chart each second (1000) each 30 seconds (30000)
            var series = this.series[0];
            setInterval(function () {
		$.ajax({
                    url: "http://www.fam-vanommen.nl/dashboard/stroom_data.php",
                }).done (function(data) {
		    var x = (data.Date), // current time
			y = (data.verbruik);
                series.addPoint([x, y], true, true);
                });	
            }, 10000);
        }
    }
},

Deze code krijg ik wanneer de stroom_data.php aangeroepen wordt:


Date: "04-04-2018"
Time: "19:47:00"
E_Today_Z: 1.66
E_Total_Z: 7202.2
H_Total_Z: 21068
Temperature_Z: 30.1
V_Pv_Z: 153.1
I_Pv_Z: 0.1
P_Ac_Z: 16
V_Ac_Z: 233.3
I_Ac_Z: 0.1
F_Ac_Z: 50.03
Opbrengst_Today_Z: 0.38
Opbrengst_Total_Z: 1656.51
verbruik: 332
af_terug: 316



Kan iemand me een zetje de juiste richting geven? ik heb het idee dat ik er bijna ben namelijk!
Bvd,
Robert.
data.Date bevat alleen een datum, data.Time bevat een tijd. Waarschijnlijk (over)schrijf je dus alles op hetzelfde x-coordinaat.
Hallo Thomas, dank je voor je reactie, en een logisch verhaal. Ik kon er verder mee en heb de stroom_data.php aangepast en een alert aan de ajax .done toegevoegd.
Deze alert geeft de waarde nu bijvoorbeeld (en uiteraard oplopend):

Date.UTC(2018, 4-1, 5, 20, 45, 02),3545

een datum+tijd en een waarde!

Als ik in de paginabron bij data kijk staat daar:
data: [[Date.UTC(2018, 4-1, 5, 12, 24, 30), 167],[Date.UTC(2018, 4-1, 5, 12, 25, 00), 175],[Date.UTC etc.

Toch wordt de waarde niet toegevoegd in de grafiek. Weet jij waarom?
Dat is lastig, ik weet ook niet precies waar dat Date.UTC() vandaan komt? Ik kan je wel vertellen wat dit inhoudt: dit zou de unix timestamp (in milliseconden) moeten teruggeven. De unix timestamp is in ieder geval een vaak gebruikte standaard om tijd te meten. Concreet is zo'n timestamp normaal gesproken (zonder de vermenigvuldiging met 1000) "het aantal seconden vanaf 1 januari 1970".

Wat misschien interessanter is, is het volgende: wat voor eenheid of formaat zou het x-coordinaat moeten hebben? Op dit moment voer je hier de unix timestamp x 1000 aan, maar de vraag is of dat dit verwacht wordt.

Ook kan het interessant zijn om na te gaan of er ergens (JavaScript-)foutmeldingen optreden, want dat zou een oorzaak kunnen zijn waarom de grafiek (visueel) niet wordt bijgewerkt.
Hallo Thomas,

mbv je tip te werken met die unix timestamp verder gekomen en werkend gekregen, dank je!

Reageren