134 lines
3.1 KiB
HTML
134 lines
3.1 KiB
HTML
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<script>
|
|
var current;
|
|
window.onload = function () {
|
|
var dataPoints1 = [];
|
|
var dataPoints2 = [];
|
|
/*{ 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: "Retrieving current A23 conditions..."
|
|
},
|
|
/* subtitles:[{
|
|
text: "X Axis scale is Logarithmic",
|
|
fontSize: 14
|
|
}],*/
|
|
axisX:{
|
|
valueFormatString: "HH:mm DD MMM",
|
|
crosshair: {
|
|
enabled: true,
|
|
snapToDataPoint: true
|
|
}
|
|
},
|
|
axisY: {
|
|
title: "Temperature",
|
|
lineColor: "#C24642",
|
|
titleFontColor: "#C24642",
|
|
labelFontColor: "#C24642",
|
|
crosshair: {
|
|
enabled: true
|
|
}
|
|
},
|
|
axisY2: [
|
|
{
|
|
title: "Relative hum %",
|
|
titleFontColor: "#51CDA0",
|
|
labelFontColor: "#51CDA0"
|
|
}
|
|
],
|
|
//{title: "Temperature",
|
|
//lineColor: "#C24642",
|
|
//titleFontColor: "#C0504E",
|
|
//labelFontColor: "#C0504E"
|
|
//},
|
|
toolTip:{
|
|
shared:true
|
|
},
|
|
legend:{
|
|
cursor:"pointer",
|
|
verticalAlign: "bottom",
|
|
horizontalAlign: "left",
|
|
dockInsidePlotArea: true,
|
|
itemclick: toogleDataSeries
|
|
},
|
|
data: [{
|
|
name: "Temperature",
|
|
type: "spline",//line
|
|
showInLegend: true,
|
|
markerType: "square",
|
|
xValueFormatString: "HH:mm on DD MMM, YYYY",
|
|
color: "#F08080",
|
|
dataPoints: dataPoints2
|
|
},
|
|
{
|
|
name: "Humidiry",
|
|
type: "spline",
|
|
axisYType: "secondary",
|
|
axisYIndex: 1,
|
|
showInLegend: true,
|
|
lineDashType: "dash",
|
|
dataPoints: dataPoints1
|
|
}]
|
|
});
|
|
|
|
|
|
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++) {
|
|
if(data[i].field_name == "A23_DHT"){
|
|
var dht = JSON.parse(data[i].field_value).dht;
|
|
var date = new Date(data[i]["timestamp"]);
|
|
if(dht && dht.hum <= 100){
|
|
dataPoints1.push({
|
|
x: date,
|
|
y: dht.hum
|
|
});
|
|
dataPoints2.push({
|
|
x: date,
|
|
y: dht.temp
|
|
});
|
|
}
|
|
}
|
|
}
|
|
chart.render();
|
|
|
|
$.getJSON("/n/dht", function(data){
|
|
if(data && data.dht){
|
|
chart.title.set("text", "A23 Currently is " + data.dht.temp + "°C, " + data.dht.hum +"% RH" );
|
|
}else {
|
|
chart.title.set("text", "A23 conditions");
|
|
}
|
|
});
|
|
}
|
|
|
|
$.getJSON("/n/dht/A23_DHT", addData);
|
|
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
|
|
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
|
|
</body>
|
|
</html> |