Get json data mbv Ajax van PHP file in container en laat zien
http://www.fam-vanommen.nl/grafiek/code7.php
Er zal vast veel aan te verbeteren zijn maar het werkt!
In de PHP's met data die aangeroepen worden, wordt ook data geretourneerd of en hoe hard de pomp draait, en of de douche aan staat e.d. Ook bijvoorbeeld hoeveel KWH de PV panelen opgebracht hebben.
Nu wil ik dit ook weergeven op dit dashboard maar ik loop vast hoe ik dit kan realiseren.
Ik denk dat ik in het script een 11e container aan moet maken met een ajax call erin met weer een setinterval, maar hoe ik dit ook probeer, ik krijg steeds geen resultaat.
Weet iemand een goed voorbeeld waar ik verder mee zou kunnen komen?
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zonnestroom, Zonneboiler en Haard</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 () {
$('#container1').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Collector',
y: 35
},
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: 130,
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: 'C'
},
plotBands: [{
from: 0,
to: 80,
color: '#55BF3B' // green
}, {
from: 80,
to: 100,
color: '#DDDF0D' // yellow
}, {
from: 100,
to: 130,
color: '#DF5353' // red
}]
},
series: [{
name: 'Temperatuur',
data: [ 1 ],
// tooltip: {valueSuffix: ' Watt'}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
$.ajax({
url: "boiler_data.php",
}).done (function(data) {
var point = chart.series[0].points[0];
point.update(data.WW_Zon);
});
}, 6000);
}
});
$('#container2').highcharts({
en hier container 2 t/m 10 (zo beter Arin) :-)
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container1" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container2" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container3" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container4" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container5" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container6" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container7" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container8" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container9" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container10" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<br><br>
<a href="http://www.fam-vanommen.nl/grafiek/index.php" target="_top">Grafieken</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Pomp: $Test
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Zonnestroom, Zonneboiler en Haard</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 () {
$('#container1').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Collector',
y: 35
},
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: 130,
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: 'C'
},
plotBands: [{
from: 0,
to: 80,
color: '#55BF3B' // green
}, {
from: 80,
to: 100,
color: '#DDDF0D' // yellow
}, {
from: 100,
to: 130,
color: '#DF5353' // red
}]
},
series: [{
name: 'Temperatuur',
data: [ 1 ],
// tooltip: {valueSuffix: ' Watt'}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
$.ajax({
url: "boiler_data.php",
}).done (function(data) {
var point = chart.series[0].points[0];
point.update(data.WW_Zon);
});
}, 6000);
}
});
$('#container2').highcharts({
en hier container 2 t/m 10 (zo beter Arin) :-)
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container1" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container2" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container3" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container4" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container5" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container6" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container7" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container8" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container9" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<div id="container10" style="min-width: 300px; max-width: 300px; height: 300px; margin: 0 auto; float: left"></div>
<br><br>
<a href="http://www.fam-vanommen.nl/grafiek/index.php" target="_top">Grafieken</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Pomp: $Test
</body>
</html>
Gewijzigd op 14/01/2018 16:48:24 door Robert v Ommen
Kan je jouw code a.u.b. even aanpassen en bewerken tot ongeveer 30 regels?
Ik heb het iets ingekort, het gaat er juist om dat deze code, waar allemaal 'containers' inzitten, en welke werkt tot dusver, ik wil aanpassen met de genoemde functionaliteit.
Je hebt het over al dan niet een elfde container aanmaken en je noemt een aantal variabelen die je blijkbaar in beeld gebracht wilt zien (quote: 'of en hoe hard de pomp draait, en of de douche aan staat e.d. Ook bijvoorbeeld hoeveel KWH de PV panelen...').
Suggestie. Begin eens met 'of en hoe hard de pomp draait', zoek een in jouw ogen geschikte highchart erbij, maak een testscript aan enkel voor het in beeld brengen van deze variabele (bijv één HTML-script). Kijk wat het doet in een developer-vriendelijke browser, bijvoorbeeld Chrome en onderzoek middels de knop 'inspecteren' wat de browser doet, welke foutmeldingen zich voordoen, etc. Een aantal foutmeldingen zul je zelf redelijk snel middels trial-and-error op kunnen lossen (icm Google). Zo niet, kun je al veel specifieker je vraag op een forum stellen.
de site waar ik in dit topic naar verwijs is uit de lucht. Ik denk doordat meerdere mensen er naar keken en door de updatefrequentie van 6 seconden x 10 meters, heeft dit te veel dataverkeer voor het hosting bedrijf gegenereerd.
Om deze reden werkt de link dus niet meer.
Nick Vledder op 15/01/2018 12:40:59:
Als dat handjevol bezoekers ervoor kan zorgen dat de site 'uit de lucht' is dan heb je nog wel wat huiswerk te doen lijkt mij zo.
Mee eens. Ik liet elke meter elke 6 seconden de data uit de database halen. Nu doe ik het elke minuut, dat zal beter gaan. Nadeel is wel dat ik pas na openen van de site, na 1 minuut gegevens heb.
Je kan ook de huidige gegevens alvast serverside ophalen en in je code verwerken. Dan hoef je daar geen minuut op te wachten.
Gewijzigd op 15/01/2018 13:41:14 door - Ariën -
Maar ik ga er eens op googelen, dank je.
De omvang van je vraag gaat al snel richting een opdracht die niet zou misstaan in het opdracht/vacature-gedeelte van dit forum, lijkt mij. Realiseer je dat de werking van JavaScript wezenlijk anders is als de werking van PHP-code. Als je er mee aan de slag gaat en 's kijkt wat er zoal in de browser gebeurt (bijv. Inspecteren in Chrome: tabjes 'console' en 'network') dan kun je al veel obstakels zelf uit de weg ruimen.
Maar inderdaad, het hele project met al het programmeren / hobbyen in python, php en java loopt behoorlijk uit de klauwen.
Java en JavaScript zijn totaal verschillend van elkaar.
Ik heb het script aangepast. Zo zal het beter gaan.
http://www.fam-vanommen.nl/dashboard/meterboard.php
(Het gaat om de volgende gegevens die je gebruikt:
data.WW_Zon
data.WW_Haard
data.Bovenin_Vat
data.Uittrede_Vat
data.Onderin_Vat
data.Voor_WW_Vloerverw
data.Na_WW_Vloerverw
data.Buitentemp)
Overigens verwacht ik niet dat de server waar PHP op draait hiervan onder de indruk raakt. Ook niet als je deze pagina tegelijk in meerdere browsers opent. Maar er is ook iets als netjes coderen. Wat dat betreft, kun je er veel van opsteken als je het DRY principe op dit stuk JavaScript loslaat.