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
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.
http://www.fam-vanommen.nl/grafiek/index_meter.php
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
Code (php)
1
point.update(data.p1_current_power_in * 25);
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
Code (php)
1
point.update(data.Huidige_stroom);
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
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!