Vraag over ouder Highcharts topic op phphulp
https://www.phphulp.nl/php/forum/topic/highcharts-gauge-met-live-data/92587/
Wanneer ik een 'live-server-data.php' maak op de website die {"p1_current_power_in":"0.940","time":1381781571000} weergeeft, zou de HTML toch moeten werken volgens de poster.
Ik krijg het echter niet voor elkaar.
Iemand anders wel?
Alvast bedankt voor reacties!
Groeten Robert.
Gewijzigd op 08/01/2018 19:17:32 door Robert v Ommen
Laat je code eens zien?
van de live-server-data.php? Daar staat alleen
echo '{"p1_current_power_in":"0.940","time":1381781571000}';
in
Daarnaast maak ik dan een HTML met de code in het topic, maar er gebeurt niets.
Verder naar onderen in hetzelfde topic geeft Danny Stultiens ook een reactie.
Zijn gauge_data.php geeft {"Huidige_stroom":"686"}. Wanneer ik zijn code van de gauge in een bestand.php zet gebeurt er ook niets.
Ik doe iets fout, maar wat.
Heb je misschien een nieuwere versie van de gauge? Heb je een testcase die we kunnen zien
Dus telkens als je die pagina opnieuw aanvraagt geeft deze de laatste (meest actuele) waarde. Als dat werkt kun je door naar het aanpassen van de meter. De javascript dient hier aangepast te worden. De meter uit jouw link laat nu een random waarde zien. Er wordt niets uit een database gehaald volgens mij. Om de zoveel tijd (bijv iedere 5 seconden) moet de javascript op de achtergrond opnieuw 'live-server-data.php' opvragen om zo de laatste waarde uit je database te krijgen. Hiervoor gebruik je een AJAX request. (Probeer server + database te onderscheiden van de client).
Het voorbeeld wat ik laat zien in de link, haalt de laatst waarde uit mijn database. Daarna gaat de '// Add some life' functie inderdaad random de meter verder laten bewegen.
Wanneer ik deze PHP maak die de waarde Huidige_stroom 686 geeft, (dmv echo)
http://www.fam-vanommen.nl/grafiek/live-server-data.php
krijg ik de code die de originele poster post niet werkend.
Dit is de code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Stroomverbruik'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 8000,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'Watt'
},
plotBands: [{
from: 0,
to: 1500,
color: '#55BF3B' // green
}, {
from: 1500,
to: 3000,
color: '#DDDF0D' // yellow
}, {
from: 3000,
to: 8000,
color: '#DF5353' // red
}]
},
series: [{
name: 'Huidig verbruik',
data: [0]
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
$.ajax({
url: "live-server-data.php",
}).done(function(data) {
var point = chart.series[0].points[0];
point.update(data.p1_current_power_in*1000);
});
}, 3000);
}
});
});
</script>
</head>
<body>
<script src="hightcharts/js/highcharts.js"></script>
<script src="hightcharts/js/highcharts-more.js"></script>
<script src="hightcharts/js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Stroomverbruik'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 8000,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'Watt'
},
plotBands: [{
from: 0,
to: 1500,
color: '#55BF3B' // green
}, {
from: 1500,
to: 3000,
color: '#DDDF0D' // yellow
}, {
from: 3000,
to: 8000,
color: '#DF5353' // red
}]
},
series: [{
name: 'Huidig verbruik',
data: [0]
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
$.ajax({
url: "live-server-data.php",
}).done(function(data) {
var point = chart.series[0].points[0];
point.update(data.p1_current_power_in*1000);
});
}, 3000);
}
});
});
</script>
</head>
<body>
<script src="hightcharts/js/highcharts.js"></script>
<script src="hightcharts/js/highcharts-more.js"></script>
<script src="hightcharts/js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>
Gewijzigd op 10/01/2018 18:37:34 door Robert v Ommen
Datgene wat je echo't vanuit PHP doe je json_encode, neem ik aan?
Zou je jouw code tussen code-tags willen zetten? Dan is het beter leesbaarder. Alvast bedankt!
mijn code hier en dan met name naar regel 124:
die p1_current_power_in wordt uit de json gelezen en moet bij jou data.Huidige_stroom worden. Vermenigvuldigen met 25 lijkt me bij jou overbodig (?)
Je krijgt dan dus
Toevoeging op 09/01/2018 20:19:37:
en uiteraard moet je wel de hele code verder overnemen.
Als je nou eens goed kijkt naar die p1_current_power_in wordt uit de json gelezen en moet bij jou data.Huidige_stroom worden. Vermenigvuldigen met 25 lijkt me bij jou overbodig (?)
Je krijgt dan dus
Toevoeging op 09/01/2018 20:19:37:
en uiteraard moet je wel de hele code verder overnemen.
Nick Vledder op 09/01/2018 19:10:29:
Datgene wat je echo't vanuit PHP doe je json_encode, neem ik aan?
Nee, gewoon
Puur om te testen. Zou dat er voor zorgen dat het niet goed werkt?
Wanneer ik de PHP start krijg ik wel een geldig json formaat volgens mij op deze manier.
Gewijzigd op 10/01/2018 18:36:27 door Robert v Ommen
Wat ook nog een rol zou kunnen spelen is tijdigheid. Je haalt met AJAX een waarde op en dat kost tijd (connecteren met server, etc). Pas op het moment dat de waarde zich in de browser bevindt, mag de nieuwe waarde gebruikt worden in Highcharts (callback, promise). Dit zou je ook nog kunnen checken voor de zekerheid...
Ligt het dan alleen aan mij dat het niet werkt?
Ik doe dit op hosting2go.
Ik ging er van uit dat de code een fout bevatte of dat ik iets fout doe wat dit veroorzaakt.
Gewijzigd op 11/01/2018 18:02:14 door Robert v Ommen
Gewijzigd op 11/01/2018 22:42:33 door Nick Vledder
bedoel je dat je het getest hebt en het bij jou wel werkt? Misschien dat ik iets fout doe, ik zal de stappen beschrijven.
Ik pak de code van Frank en zet deze in een textbestand die ik 'code.php' heb genoemd. Deze zet in in de map online:
http://www.fam-vanommen.nl/grafiek/code.php
ik maak verder een 'gauge_data.php' text bestand waar de volgende code in staat:
Deze staat in dezelfde map
http://www.fam-vanommen.nl/grafiek/gauge_data.php
Zoals je kan zien komt daar de goede json data uit.
toch geeft bij mij de code.php geen reactie. Het scherm blijft leeg. Er zal een fout in staan dus lijkt het mij dat ik ook niets kan loggen, of begrijp ik dat ook verkeerd? Hoe kom ik er achter wat er fout gaat?
Code (php)
1
2
3
2
3
<script src="/js/highcharts.js"></script>
<script src="/js/highcharts-more.js"></script>
<script src="/js/modules/exporting.js"></script>
<script src="/js/highcharts-more.js"></script>
<script src="/js/modules/exporting.js"></script>
Maar die javascript bestanden worden niet gevonden.
Ik heb ze gevonden en er in gezet. Werkt nog niet helemaal, ik krijg een zwart vlak, maar er gebeurt nou in ieder geval iets, dank je! Wat zou dit nog kunnen veroorzaken?
Toevoeging op 13/01/2018 10:37:42:
Werkt, hier kan ik weer verder mee spelen, dank je jan!