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?
<!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 Ariën) :-)
});
</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>
