208 lines
7.0 KiB
Plaintext
208 lines
7.0 KiB
Plaintext
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
|
|
<div id="now" class="form-text">getting inside conditions...</div>
|
|
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
|
|
|
|
<%- contentFor('head') %>
|
|
<script>
|
|
var current;
|
|
window.onload = function () {
|
|
var temp = { in: [], out: [], outDew:[] };
|
|
var hum = { in: [], out: [], outSoil: []};
|
|
var press = { out: [] };
|
|
var time = [];
|
|
/*{ x: new Date(2017, 0, 3), y: 650 },
|
|
{ x: new Date(2017, 0, 4), y: 700 },
|
|
*/
|
|
|
|
var chart = new CanvasJS.Chart("chartContainer", {
|
|
animationEnabled: true,
|
|
theme: "light2",
|
|
zoomEnabled: true,
|
|
zoomType: "x",
|
|
exportEnabled: true,
|
|
title: {
|
|
text: "Weather conditions in the lasts 7 days"
|
|
},
|
|
/* subtitles:[{
|
|
text: "X Axis scale is Logarithmic",
|
|
fontSize: 14
|
|
}],*/
|
|
toolTip: {
|
|
shared: true
|
|
},
|
|
legend: {
|
|
cursor: "pointer",
|
|
verticalAlign: "bottom",
|
|
horizontalAlign: "left",
|
|
dockInsidePlotArea: true,
|
|
itemclick: toogleDataSeries
|
|
},
|
|
axisX: {
|
|
valueFormatString: "HH:mm DD MMM",
|
|
crosshair: {
|
|
enabled: true,
|
|
snapToDataPoint: true
|
|
}
|
|
},
|
|
axisY: [
|
|
{
|
|
title: "Air Temperature",
|
|
lineColor: "#C24642",
|
|
titleFontColor: "#C24642",
|
|
labelFontColor: "#C24642",
|
|
suffix: " °C",
|
|
crosshair: {
|
|
enabled: true
|
|
},
|
|
//minimum: -10,
|
|
// maximum: 40,
|
|
}, {
|
|
title: "ATM Pressure",
|
|
lineColor: "#A477C6",
|
|
titleFontColor: "#A477C6",
|
|
labelFontColor: "#A477C6",
|
|
suffix: " hPa",
|
|
crosshair: {
|
|
enabled: true
|
|
},
|
|
minimum: 990,
|
|
//maximum: 1080,
|
|
},
|
|
],
|
|
axisY2: [
|
|
{
|
|
title: "Relative Humidity",
|
|
titleFontColor: "#51CDA0",
|
|
labelFontColor: "#51CDA0",
|
|
minimum: 0,
|
|
maximum: 100,
|
|
suffix: " %",
|
|
crosshair: {
|
|
enabled: true
|
|
},
|
|
}
|
|
],
|
|
data: [{
|
|
name: "Out Temperature",
|
|
type: "line",//line
|
|
showInLegend: true,
|
|
markerType: "square",
|
|
xValueFormatString: "HH:mm on DD MMM, YYYY",
|
|
color: "#F08080",
|
|
dataPoints: temp.out
|
|
},
|
|
/*{
|
|
name: "Dew Point",
|
|
type: "line",//line
|
|
showInLegend: true,
|
|
markerType: "none",
|
|
color: "#94D8F6",
|
|
dataPoints: temp.outDew
|
|
},*/
|
|
{
|
|
name: "In Temperature",
|
|
type: "line",//line
|
|
showInLegend: true,
|
|
markerType: "none",
|
|
color: "#92D050",
|
|
lineThickness: 4,
|
|
dataPoints: temp.in
|
|
},
|
|
{
|
|
name: "ATM Pressure",
|
|
axisYIndex: 1,
|
|
type: "line",
|
|
showInLegend: true,
|
|
lineDashType: "dash",
|
|
color: "#A477C6",
|
|
dataPoints: press.out
|
|
},
|
|
//----- sright axies -----
|
|
{
|
|
name: "Air RH",
|
|
axisYType: "secondary", //at right
|
|
//axisYIndex: 1,
|
|
type: "spline",
|
|
showInLegend: true,
|
|
//lineDashType: "dash",
|
|
dataPoints: hum.out
|
|
},
|
|
{
|
|
name: "Soil RH",
|
|
axisYType: "secondary",
|
|
axisYIndex: 1,
|
|
type: "line",
|
|
lineThickness: 4,
|
|
showInLegend: true,
|
|
//lineDashType: "dash",
|
|
color: "#99D9EA",
|
|
dataPoints: hum.outSoil
|
|
}]
|
|
});
|
|
|
|
|
|
function toogleDataSeries(e) {
|
|
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
|
|
e.dataSeries.visible = false;
|
|
} else {
|
|
e.dataSeries.visible = true;
|
|
}
|
|
chart.render();
|
|
}
|
|
|
|
function addData(data) {
|
|
for (var i = 0; i < data.length; i++) {
|
|
var date = new Date(data[i]["timestamp"]);
|
|
if (data[i].field_name == "A23_Garden_dht") {
|
|
time.push(date);
|
|
var dht = JSON.parse(data[i].field_value);
|
|
hum.out.push({ x: date, y: parseFloat(dht.Hum) });
|
|
temp.out.push({ x: date, y: parseFloat(dht.Temp) });
|
|
temp.outDew.push({ x: date, y: parseFloat(dht.Temp) - ((parseFloat(dht.Hum))/5) });
|
|
press.out.push({ x: date, y: parseFloat(dht.Pres) });
|
|
if (dht.Soil) {
|
|
hum.outSoil.push({ x: date, y: parseFloat(dht.Soil) });
|
|
}
|
|
}
|
|
if (data[i].field_name == "A23_DHT") {
|
|
time.push(date);
|
|
var dht = JSON.parse(data[i].field_value).dht;
|
|
if (dht && dht.hum <= 100) {
|
|
hum.in.push({
|
|
x: date,
|
|
y: dht.hum
|
|
});
|
|
temp.in.push({
|
|
x: date,
|
|
y: dht.temp
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
if (temp.out.length > 0 && hum.out.length > 0 && press.out.length > 0 && time.length > 0) {
|
|
//setTimeout(function(){
|
|
chart.title.set("text", "Out: " + temp.out[temp.out.length-1].y + "°C, "
|
|
+ hum.out[hum.out.length-1].y + "% RH, "
|
|
+ press.out[press.out.length-1].y + " hPa ("
|
|
+ time[time.length-1].toLocaleString() + ")");
|
|
//},5000);
|
|
}
|
|
chart.render();
|
|
}
|
|
|
|
$.getJSON("/n/device/A23_DHT/7", addData);
|
|
$.getJSON("/n/device/A23_Garden_dht/7", addData);
|
|
setTimeout(function(){
|
|
$.getJSON("/n/dht?e=now", function(data){
|
|
if(data && data.dht){
|
|
$("#now").text("In A23 currently is " + data.dht.temp + "°C, " + data.dht.hum +"% RH" );
|
|
}else {
|
|
$("#now").text("failed to get inside conditions" );
|
|
}
|
|
});
|
|
},5000);
|
|
}
|
|
</script> |