Highcharts gauge met live data
Ik heb een mysql tabel die elke 10 seconden van nieuwe gegevens wordt voorzien. Van een van de kolommen wil ik de waarde weergegeven in een teller op basis van Highcharts.
Bij de supportpagina heb ik al wat gevonden over live gegevens maar dat is voornamelijk voor lijn grafieken. De teller heeft steeds maar 1 waarde nodig die elke 10 seconden geupdate moet worden en geen reeks waar steeds een waarde bij komt. Ik heb nu de volgende code:
Code (html)
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
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
<!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">
var chart
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
events:{load: requestData},
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 200,
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: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 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">
var chart
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
events:{load: requestData},
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 200,
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: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 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>
Mijn live-server-data.php geeft bv: {"p1_current_power_in":"0.940","time":1381781571000}.
Wie kan me op weg helpen?
Graag volgende keer alle codes tussen de [code]-tags zetten aub.[/modedit]
Gewijzigd op 15/10/2013 11:42:18 door Nick Dijkstra
Onderin staat: function (chart) {
Deze functie zorgt er voor dat de naald in de demo wat gaat bewegen. Dit deel moet je dus vervangen voor een eigen functie die via een ajax call de nieuwe waarde ophaalt. Dan verwacht deze meter een waarde tussen 0 en 200. In jouw voorbeeld krijg je een waarde van 0.940 terug, bijna niets dus op een schaal van 200. Daarom heb ik in onderstaand voorbeeld de waarde van jouw server maar met 25 vermenigvuldigd. Daar zul zelf nog een betere oplossing voor moeten bedenken.
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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 200,
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: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// 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 * 25);
});
}, 3000);
}
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
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: 200,
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: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// 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 * 25);
});
}, 3000);
}
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>
Gewijzigd op 15/10/2013 01:30:05 door Frank Nietbelangrijk
Maar nu:
Elke 10 seconden wordt er een regel aan mijn database toegevoegd en door de interval van de functie op 3000 te zetten loop ik maximaal 3 seconden achter op de werkelijkheid. Maar als ik de pagina laad begint de gauge op 0 (de waarde welke ik bij "data: [0]" invul. En dan pas na 3 seconden wordt deze bijgewerkt. Hoe zorg ik er voor dat bij het laden van de pagina de waarde al opgevraagd wordt uit de database en wordt weergegeven?
Ik heb nu de volgende 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>
dan kun je regel 99
Code (php)
1
data: [0]
vervangen door
waarbij $waarde natuurlijk het energieverbruik is van dat moment
Toevoeging op 22/10/2013 23:26:54:
NOU DIE [ /CODE ] moet er uit
Gewijzigd op 22/10/2013 23:26:27 door Frank Nietbelangrijk
Dit topic is al een tijdje afgerond, maar ik heb een probleempje wat hier erg op lijkt; de waarde die ik in de MySQL database ophaal, wordt niet overgenomen door de gauge.
Hieronder mijn codes;
gauge_data.php;
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<title>Laatste wattage</title>
<?php
// Start MySQL Connection
include('dbconnect.php');
if (!$dbh) {die('Could not connect: ' . mysql_error());}
//identify last row
$count=mysql_num_rows(mysql_query("SELECT * FROM kWh_meter")); //gives number of rows
$result = mysql_query("SELECT * FROM kWh_meter LIMIT ". ($count-1).", 1"); //gives number of last row
//get data
echo ("{");
echo ("\"");
echo ("Huidige_stroom");
echo ("\"");
echo (":");
echo ("\"");
while($row = mysql_fetch_array($result)) {echo $row['Watt'];} //finds Watt value of last row
echo ("\"");
echo ("}");
mysql_close($con);
?>
<?php
// Start MySQL Connection
include('dbconnect.php');
if (!$dbh) {die('Could not connect: ' . mysql_error());}
//identify last row
$count=mysql_num_rows(mysql_query("SELECT * FROM kWh_meter")); //gives number of rows
$result = mysql_query("SELECT * FROM kWh_meter LIMIT ". ($count-1).", 1"); //gives number of last row
//get data
echo ("{");
echo ("\"");
echo ("Huidige_stroom");
echo ("\"");
echo (":");
echo ("\"");
while($row = mysql_fetch_array($result)) {echo $row['Watt'];} //finds Watt value of last row
echo ("\"");
echo ("}");
mysql_close($con);
?>
Deze php geeft nu in een webbrowser een enkele regel die er als volgt uit ziet;
{"Huidige_stroom":"686"}
Dan de html van de gauge zelf;
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
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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Huidige wattage</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: 'Huidige wattage'
},
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: 'Wattage',
data: [ 1 ],
// tooltip: {valueSuffix: ' Watt'}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
$.ajax({
url: "gauge_data.php",
}).done (function(data) {
var point = chart.series[0].points[0];
point.update(data.Huidige_stroom);
});
}, 3000);
}
});
});
</script>
</head>
<body>
<script src="/js/highcharts.js"></script>
<script src="/js/highcharts-more.js"></script>
<script src="/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>Huidige wattage</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: 'Huidige wattage'
},
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: 'Wattage',
data: [ 1 ],
// tooltip: {valueSuffix: ' Watt'}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
$.ajax({
url: "gauge_data.php",
}).done (function(data) {
var point = chart.series[0].points[0];
point.update(data.Huidige_stroom);
});
}, 3000);
}
});
});
</script>
</head>
<body>
<script src="/js/highcharts.js"></script>
<script src="/js/highcharts-more.js"></script>
<script src="/js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>
Wat ik zie; de naald blijft op de beginwaarde (1) staan. De waarde van de php wordt dus niet overgenomen.
Heb overigens geen opleiding / training gehad in html etc. Ik google mijn weg hierdoorheen, maar na 2 weken puzzelen, blijft ik hierop hangen. Een helpende hand wordt erg gewaardeerd.
Alvast dank voor reacties.
mvg,
Danny
Code (php)
1
{"Huidige_stroom":"686"}
Hier staat 686 tussen quotes en wordt het gezien als een brok tekst. En met tekst kun je niet rekenen.
Probeer het eens op deze manier:
Code (php)
1
{"Huidige_stroom":686}
Verder mist gauge_data.php een header() waarmee je de browser laat weten dat je JSON data retourneert.
Tevens hoort er geen enkele HTML in te staan. dus ook niet de <title></title> tag.
gauge_data.php:
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
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
<?php
// laat de browsers weten dat we JSON data terugsturen
header('Content-Type: application/json');
// Start MySQL Connection
include('dbconnect.php');
if (!$dbh) {
echo '{"status":"failure","error":"' . mysql_error() . '"}'; // geef ook foutmeldingen terug in JSON
exit;
}
//identify last row
$count = mysql_num_rows(mysql_query("SELECT * FROM kWh_meter")); //gives number of rows
$result = mysql_query("SELECT * FROM kWh_meter LIMIT ". ($count-1).", 1"); //gives number of last row
if(!$result)
{
echo '{"status":"failure","error":"query mislukt"}';
exit;
}
// omdat er maar één rij opgevraagd wordt is een IF logischer dan een WHILE
if($row = mysql_fetch_array($result)) {
echo '{"status":"success","Huidige_stroom":' . $row['Watt'] . '}';
exit;
}
echo '{"status":"failure","error":"Geen informatie gevonden. (tabel kWh_meter is leeg?)"}';
?>
// laat de browsers weten dat we JSON data terugsturen
header('Content-Type: application/json');
// Start MySQL Connection
include('dbconnect.php');
if (!$dbh) {
echo '{"status":"failure","error":"' . mysql_error() . '"}'; // geef ook foutmeldingen terug in JSON
exit;
}
//identify last row
$count = mysql_num_rows(mysql_query("SELECT * FROM kWh_meter")); //gives number of rows
$result = mysql_query("SELECT * FROM kWh_meter LIMIT ". ($count-1).", 1"); //gives number of last row
if(!$result)
{
echo '{"status":"failure","error":"query mislukt"}';
exit;
}
// omdat er maar één rij opgevraagd wordt is een IF logischer dan een WHILE
if($row = mysql_fetch_array($result)) {
echo '{"status":"success","Huidige_stroom":' . $row['Watt'] . '}';
exit;
}
echo '{"status":"failure","error":"Geen informatie gevonden. (tabel kWh_meter is leeg?)"}';
?>
Toevoeging op 04/07/2015 11:52:40:
Verander dit:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$.ajax({
url: "gauge_data.php",
}).done (function(data) {
var point = chart.series[0].points[0];
point.update(data.Huidige_stroom);
});
url: "gauge_data.php",
}).done (function(data) {
var point = chart.series[0].points[0];
point.update(data.Huidige_stroom);
});
naar dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$.ajax({
url: "gauge_data.php",
}).done (function(data) {
if(data.status == "success") {
var point = chart.series[0].points[0];
point.update(data.Huidige_stroom);
} else {
alert(data.error);
}
});
url: "gauge_data.php",
}).done (function(data) {
if(data.status == "success") {
var point = chart.series[0].points[0];
point.update(data.Huidige_stroom);
} else {
alert(data.error);
}
});
Gewijzigd op 04/07/2015 11:53:46 door Frank Nietbelangrijk
Code (php)
1
2
3
4
5
2
3
4
5
<?php
//identify last row
$count=mysql_num_rows(mysql_query("SELECT * FROM kWh_meter")); //gives number of rows
$result = mysql_query("SELECT * FROM kWh_meter LIMIT ". ($count-1).", 1"); //gives number of last row
?>
//identify last row
$count=mysql_num_rows(mysql_query("SELECT * FROM kWh_meter")); //gives number of rows
$result = mysql_query("SELECT * FROM kWh_meter LIMIT ". ($count-1).", 1"); //gives number of last row
?>
I LOLed.
Als je je tabel een auto_increment kolom heeft (of had gegeven) en het feit dat je alleen de kolom "Watt" lijkt te gebruiken, kun je volstaan met:
Code (php)
1
2
3
4
2
3
4
SELECT Watt
FROM kWh_meter
ORDER BY <je_auto_increment_kolom> DESC
LIMIT 1
FROM kWh_meter
ORDER BY <je_auto_increment_kolom> DESC
LIMIT 1
Het werkt nu als een zonnetje.
De meeste codes heb ik bij elkaar gegoogled, wellicht daardoor niet helemaal logisch of onnodige code.