Håller på och utvecklar en temperatur logger för min värmepump, använder då en raspberry och ett gäng DS18B20 kopplat till en i2c -> 1wire omvandlare.
sensorerna läses ur varje minut och läggs i en mysql databas, en php fil läser datan till en html sida som visar graferna via highcharts.
problemet är att jag måste göra om datan som kommer ifrån php filen till flera series som det heter i highcharts.
Någon som kan hjälpa mig med detta? Jag har lånat en del kod ifrån highstocks exempel och anpassat denna för mina behov.
Kod: Markera allt
[1446147110000,10.00,20.00],
[1446147135000,22.38,22.19],
[1446150796000,22.38,22.19],
[1446150855000,22.38,22.19],
[1446150916000,22.38,22.19],
[1446150975000,22.38,22.19],
[1446151036000,22.38,22.19],
[1446151336000,22.31,22.25],
[1446151395000,22.38,22.19],
[1446151456000,22.38,22.25],
Kod: Markera allt
<?php
// get the parameters
echo "/* console.log(' start '); */";
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/dbconnection/temperature_dbinfo.php";
require($path);
$callback = $_GET['callback'];
if (!preg_match('/^[a-zA-Z0-9_]+$/', $callback)) {
die('Invalid callback name');
}
$start = @$_GET['start'];
if ($start && !preg_match('/^[0-9]+$/', $start)) {
die("Invalid start parameter: $start");
}
$end = @$_GET['end'];
if ($end && !preg_match('/^[0-9]+$/', $end)) {
die("Invalid end parameter: $end");
}
if (!$end) $end = time() * 1000;
$con = mysql_connect($mysqlserver,$username,$password);
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db($database, $con);
// set UTC time
mysql_query("SET time_zone = '+00:00'");
// set some utility variables
$range = $end - $start;
$startTime = gmstrftime('%Y-%m-%d %H:%M:%S', $start / 1000);
$endTime = gmstrftime('%Y-%m-%d %H:%M:%S', $end / 1000);
// find the right table
// two days range loads minute data
if ($range < 2 * 24 * 3600 * 1000) {
$table = 'temp_raw';
// one month range loads hourly data
} elseif ($range < 31 * 24 * 3600 * 1000) {
$table = 'temp_raw';
// one year range loads daily data
} elseif ($range < 15 * 31 * 24 * 3600 * 1000) {
$table = 'temp_raw';
// greater range loads monthly data
} else {
$table = 'temp_raw';
}
$sql = "
select
unix_timestamp(datetime) * 1000 as datetime,
t1,
t2,
t3,
t4,
t5,
t6,
t7,
t8,
t9,
t10,
t11,
t12
from $table
where datetime between '$startTime' and '$endTime'
order by datetime
limit 0, 5000
";
$result = mysql_query($sql) or die(mysql_error());
$rows = array();
while ($row = mysql_fetch_assoc($result)) {
extract($row);
$rows[] = "[$datetime,$t1,$t2]";
}
// print it
header('Content-Type: text/javascript');
echo "/* console.log(' start = $start, end = $end, startTime = $startTime, endTime = $endTime '); */";
echo $callback ."([\n" . join(",\n", $rows) ."\n]);";
?>
Kod: Markera allt
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Temperatures</title>
</head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">
console.log('START')
$(function () {
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var chart = $('#container').highcharts();
chart.showLoading('Loading data from server...');
$.getJSON('load_data.php?start=' + Math.round(e.min) +
'&end=' + Math.round(e.max) + '&callback=?', function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
$.getJSON('load_data.php?callback=?', function (data) {
// Add a null value for the end date
data = [].concat(data, [[Date.UTC(2020, 01, 01, 00, 00), null, null, null, null]]);
console.log( "Reslut: \n" + (data) );
// create the chart
$('#container').highcharts('StockChart', {
chart : {
type: 'line',
zoomType: 'x'
},
navigator : {
adaptToUpdatedData: false,
series : {
data : data
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'test'
},
subtitle: {
text: 'async server loading'
},
rangeSelector : {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false, // it supports only days
selected : 4 // all
},
xAxis : {
events : {
afterSetExtremes : afterSetExtremes
},
minRange: 3600 * 1000 // one hour
},
yAxis: {
floor: 0
},
series: [{
data:data
}]
});
});
});
</script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<!-- load the charts -->
</body>
</html>
