Код: Выделить всё
<script type="text/javascript" src="../../highcharts_new/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../../highcharts-new/js/highstock.js"></script>
<script type="text/javascript">
$(function () {
var seriesOptions = [],
last_id = [],
serData = [],
now = 0,
chart,
seriesCounter = 0,
names = ['улица','зал','спальня','столовая'],
sensornames = ['ESP00F8E1FC.dhtt1',
'ESP00F8E1FC.bmpt',
'18:fe:34:9e:25:8e.temp',
'18:fe:34:a4:e1:a5.tmp1'];
Highcharts.setOptions({
lang: {
months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль',
'Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
shortMonths: ['Янв','Фев','Мар','Апр','Май','Июн','Июл',
'Авг','Сен','Окт','Ноя','Дек'],
weekdays: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
rangeSelectorZoom: 'Маcштаб',
rangeSelectorFrom: 'От',
rangeSelectorTo: 'До',
thousandsSep: ' '
},
global: {
useUTC: false
}
});
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x',
events: {
load: function () {
setInterval(function () {
updateChart();
}, 60000);
}
}
},
rangeSelector: {
buttons: [
{ type: 'hour', count: 1, text: '1h' },
{ type: 'hour', count: 6, text: '6h' },
{ type: 'hour', count: 12, text: '12h' },
{ type: 'day', count: 1, text: '1d' },
{ type: 'day', count: 3, text: '3d' },
{ type: 'week', count: 1, text: '1w' },
{ type: 'month', count: 1, text: '1m' },
{ type: 'all', text: 'All' }],
selected: 1,
inputEnabled: false
},
title: { text : 'График температур в доме' },
legend: { enabled : true,
layout : 'horizontal',
align : 'center',
verticalAlign : 'top',
borderWidth: 0,
x : 0,
y : 20 },
xAxis : {
ordinal: false,
minRange: 3600 * 1000 // one hour
},
yAxis: {
title: { text : 'Температура (°C)' }
},
series: seriesOptions
});
now = new Date().getTime();
now -= now % 1000;
for (i = 0; i < names.length; i++){
len = chart.series[i].processedYData.length - 1;
last = chart.series[i].processedYData[len];
chart.series[i].addPoint([now,last], true, true);
// alert(now + ' ' + last);
};
};
$.each(names, function (i, name) {
$.getJSON('/objects/?script=jconhs-new&name='+sensornames[i], function (data) {
last_id[i] = data.last_id;
seriesOptions[i] = {
name: name,
data: data.data,
type: 'spline',
marker: {
enabled: false,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
};
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
};
});
});
function updateChart() {
now = 0;
$.each(names, function (i) {
$.getJSON('/objects/?script=jconhs-new&name=' + sensornames[i] + '&lastid=' + last_id[i], function (data_) {
if (data_.data.length > 0){
last_id[i] = data_.last_id;
$.each(data_.data, function (idx, e) {
// chart.series[i].addPoint(e, true, true);
now = e[0];
serData[i] = e[1];
// alert('Date='+now+' value='+e[1]);
})
} else {
len = chart.series[i].processedYData.length - 1;
serData[i] = chart.series[i].processedYData[len];
}
if (i == (names.length - 1)) {
updateChart_();
}
});
});
};
function updateChart_() {
// alert(now + ' ' + serData);
if (now > 0){
for (i = 0; i < serData.length; i++){
chart.series[i].addPoint([now,serData[i]], true, true);
}
}
}
});
</script>
<div id="container" style="height: 500px; min-width: 500px; margin: 0 auto"></div>
