Highcharts live data grafiek mbv addpoint
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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);
}
}
},
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:
Quote:
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
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.
Gewijzigd op 04/04/2018 22:44:09 door Thomas van den Heuvel
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?
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.
mbv je tip te werken met die unix timestamp verder gekomen en werkend gekregen, dank je!