@ -0,0 +1,43 @@
|
|||||||
|
/*
|
||||||
|
* Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||||
|
*
|
||||||
|
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||||
|
* Version 2.0 (the "License"); you may not use this file except
|
||||||
|
* in compliance with the License.
|
||||||
|
* You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
|
||||||
|
* either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
var deviceModule;
|
||||||
|
var carbon = require('carbon');
|
||||||
|
var carbonHttpServletTransport = carbon.server.address('http');
|
||||||
|
var carbonHttpsServletTransport = carbon.server.address('https');
|
||||||
|
|
||||||
|
deviceModule = function () {
|
||||||
|
var log = new Log("modules/device.js");
|
||||||
|
|
||||||
|
var constants = require("/modules/constants.js");
|
||||||
|
var utility = require("/modules/utility.js").utility;
|
||||||
|
|
||||||
|
var publicMethods = {};
|
||||||
|
var privateMethods = {};
|
||||||
|
|
||||||
|
publicMethods.getAllDevicesTypes = function(){
|
||||||
|
//URL: https://localhost:9443/devicecloud/manager/devices/username/{username}
|
||||||
|
deviceCloudService = carbonHttpsServletTransport + "/devicecloud/manager";
|
||||||
|
listAllDeviceTypesEndPoint = deviceCloudService + "/devices/types";
|
||||||
|
|
||||||
|
var data = {};
|
||||||
|
//XMLHTTPRequest's GET
|
||||||
|
return get(listAllDeviceTypesEndPoint, data, "json");
|
||||||
|
};
|
||||||
|
|
||||||
|
}();
|
@ -0,0 +1,4 @@
|
|||||||
|
function onRequest(context){
|
||||||
|
context.sketchPath = "api/device/sketch/download";
|
||||||
|
return context;
|
||||||
|
}
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
@ -0,0 +1,4 @@
|
|||||||
|
function onRequest(context){
|
||||||
|
context.sketchPath = "api/device/sketch/download";
|
||||||
|
return context;
|
||||||
|
}
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
@ -0,0 +1,4 @@
|
|||||||
|
function onRequest(context){
|
||||||
|
context.sketchPath = "api/device/sketch/download";
|
||||||
|
return context;
|
||||||
|
}
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 139 KiB |
Before Width: | Height: | Size: 478 KiB After Width: | Height: | Size: 478 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 90 KiB |
@ -0,0 +1,4 @@
|
|||||||
|
function onRequest(context){
|
||||||
|
context.sketchPath = "api/device/sketch/download";
|
||||||
|
return context;
|
||||||
|
}
|
Before Width: | Height: | Size: 516 B After Width: | Height: | Size: 516 B |
Before Width: | Height: | Size: 451 B After Width: | Height: | Size: 451 B |
Before Width: | Height: | Size: 650 B After Width: | Height: | Size: 650 B |
Before Width: | Height: | Size: 373 B After Width: | Height: | Size: 373 B |
@ -1,4 +0,0 @@
|
|||||||
function onRequest(context){
|
|
||||||
context.sketchPath = "api/device/sketch";
|
|
||||||
return context;
|
|
||||||
}
|
|
@ -1,4 +0,0 @@
|
|||||||
function onRequest(context){
|
|
||||||
context.sketchPath = "api/device/sketch";
|
|
||||||
return context;
|
|
||||||
}
|
|
@ -1,4 +1,4 @@
|
|||||||
function onRequest(context){
|
function onRequest(context){
|
||||||
context.sketchPath = "api/device/sketch";
|
context.sketchPath = "api/device/sketch";
|
||||||
return context;
|
return context;
|
||||||
}
|
}
|
||||||
|
@ -1,64 +0,0 @@
|
|||||||
var bulbChart;
|
|
||||||
|
|
||||||
nv.addGraph(function () {
|
|
||||||
|
|
||||||
bulbChart = nv.models.lineChart()
|
|
||||||
.interpolate("step-after")
|
|
||||||
.options({
|
|
||||||
transitionDuration: 300,
|
|
||||||
useInteractiveGuideline: true
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
bulbChart.xScale(d3.time.scale());
|
|
||||||
|
|
||||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
||||||
bulbChart.xAxis
|
|
||||||
.axisLabel("Date/Time")
|
|
||||||
.ticks(d3.time.seconds)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
|
||||||
})
|
|
||||||
.staggerLabels(true)
|
|
||||||
;
|
|
||||||
|
|
||||||
bulbChart.yAxis
|
|
||||||
.axisLabel('ON / OFF')
|
|
||||||
.tickValues(1)
|
|
||||||
.tickFormat(function(d) {
|
|
||||||
return d == 1 ? 'ON' : 'OFF'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
d3.select('.chart6 svg')
|
|
||||||
.datum(getBulbChartData())
|
|
||||||
.call(bulbChart);
|
|
||||||
|
|
||||||
nv.utils.windowResize(bulbChart.update);
|
|
||||||
|
|
||||||
return bulbChart;
|
|
||||||
});
|
|
||||||
|
|
||||||
function getBulbChartData() {
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
area: true,
|
|
||||||
values: [],
|
|
||||||
key: "Bulb",
|
|
||||||
color: "#34500e"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateBulbGraph(fanData) {
|
|
||||||
|
|
||||||
var chartData = getBulbChartData();
|
|
||||||
chartData[0]['values'] = fanData;
|
|
||||||
|
|
||||||
d3.select('.chart6 svg')
|
|
||||||
.datum(chartData)
|
|
||||||
.transition().duration(500)
|
|
||||||
.call(bulbChart);
|
|
||||||
}
|
|
@ -1,64 +0,0 @@
|
|||||||
var bulbStatusChart;
|
|
||||||
nv.addGraph(function () {
|
|
||||||
|
|
||||||
bulbStatusChart = nv.models.lineChart()
|
|
||||||
.interpolate("step-after")
|
|
||||||
.options({
|
|
||||||
transitionDuration: 300,
|
|
||||||
useInteractiveGuideline: true
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
bulbStatusChart.xScale(d3.time.scale());
|
|
||||||
|
|
||||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
||||||
bulbStatusChart.xAxis
|
|
||||||
.axisLabel("Date/Time")
|
|
||||||
.ticks(d3.time.seconds)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
|
||||||
})
|
|
||||||
.staggerLabels(true)
|
|
||||||
;
|
|
||||||
|
|
||||||
bulbStatusChart.yAxis
|
|
||||||
.axisLabel('ON / OFF')
|
|
||||||
.tickValues(1)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d == 1 ? 'ON' : 'OFF'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
d3.select('.chart3 svg')
|
|
||||||
.datum(getBulbStatusChartData)
|
|
||||||
.call(bulbStatusChart);
|
|
||||||
|
|
||||||
nv.utils.windowResize(bulbStatusChart.update);
|
|
||||||
|
|
||||||
return bulbStatusChart;
|
|
||||||
});
|
|
||||||
|
|
||||||
function getBulbStatusChartData() {
|
|
||||||
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
area: true,
|
|
||||||
step: true,
|
|
||||||
values: [],
|
|
||||||
key: "Bulb Status",
|
|
||||||
color: "#ff500e"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
|
||||||
function updateBulbStatusGraph(bulbStatusData) {
|
|
||||||
|
|
||||||
var chartData = getBulbStatusChartData();
|
|
||||||
chartData[0]['values'] = bulbStatusData;
|
|
||||||
|
|
||||||
d3.select('.chart3 svg')
|
|
||||||
.datum(chartData)
|
|
||||||
.transition().duration(500)
|
|
||||||
.call(bulbStatusChart);
|
|
||||||
}
|
|
@ -1,63 +0,0 @@
|
|||||||
var fanChart;
|
|
||||||
|
|
||||||
nv.addGraph(function () {
|
|
||||||
|
|
||||||
fanChart = nv.models.lineChart()
|
|
||||||
.interpolate("step-after")
|
|
||||||
.options({
|
|
||||||
transitionDuration: 300,
|
|
||||||
useInteractiveGuideline: true
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
fanChart.xScale(d3.time.scale());
|
|
||||||
|
|
||||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
||||||
fanChart.xAxis
|
|
||||||
.axisLabel("Date/Time")
|
|
||||||
.ticks(d3.time.seconds)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
|
||||||
})
|
|
||||||
.staggerLabels(true)
|
|
||||||
;
|
|
||||||
|
|
||||||
fanChart.yAxis
|
|
||||||
.axisLabel('Fan (Status)')
|
|
||||||
.tickFormat(function(d) {
|
|
||||||
return d == 1 ? 'ON' : 'OFF'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
d3.select('.chart5 svg')
|
|
||||||
.datum(getFanChartData())
|
|
||||||
.call(fanChart);
|
|
||||||
|
|
||||||
nv.utils.windowResize(fanChart.update);
|
|
||||||
|
|
||||||
return fanChart;
|
|
||||||
});
|
|
||||||
|
|
||||||
function getFanChartData() {
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
area: true,
|
|
||||||
values: [],
|
|
||||||
key: "Fan",
|
|
||||||
color: "#34500e"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateFanGraph(fanData) {
|
|
||||||
|
|
||||||
var chartData = getFanChartData();
|
|
||||||
chartData[0]['values'] = fanData;
|
|
||||||
|
|
||||||
d3.select('.chart5 svg')
|
|
||||||
.datum(chartData)
|
|
||||||
.transition().duration(500)
|
|
||||||
.call(fanChart);
|
|
||||||
}
|
|
@ -1,63 +0,0 @@
|
|||||||
var fanStatusChart;
|
|
||||||
nv.addGraph(function () {
|
|
||||||
|
|
||||||
fanStatusChart = nv.models.lineChart()
|
|
||||||
.interpolate("step-after")
|
|
||||||
.options({
|
|
||||||
transitionDuration: 300,
|
|
||||||
useInteractiveGuideline: true
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
fanStatusChart.xScale(d3.time.scale());
|
|
||||||
|
|
||||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
||||||
fanStatusChart.xAxis
|
|
||||||
.axisLabel("Date/Time")
|
|
||||||
.ticks(d3.time.seconds)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
|
||||||
})
|
|
||||||
.staggerLabels(true)
|
|
||||||
;
|
|
||||||
|
|
||||||
fanStatusChart.yAxis
|
|
||||||
.axisLabel('ON / OFF')
|
|
||||||
.tickValues(1)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d == 1 ? 'ON' : 'OFF'
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
d3.select('.chart2 svg')
|
|
||||||
.datum(getFanStatusChartData)
|
|
||||||
.call(fanStatusChart);
|
|
||||||
|
|
||||||
nv.utils.windowResize(fanStatusChart.update);
|
|
||||||
|
|
||||||
return fanStatusChart;
|
|
||||||
});
|
|
||||||
|
|
||||||
function getFanStatusChartData() {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
area: true,
|
|
||||||
step: true,
|
|
||||||
values: [],
|
|
||||||
key: "Fan Status",
|
|
||||||
color: "#ff7f0e"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateFanStatusGraph(fanStatusData) {
|
|
||||||
|
|
||||||
var chartData = getFanStatusChartData();
|
|
||||||
chartData[0]['values'] = fanStatusData;
|
|
||||||
|
|
||||||
d3.select('.chart2 svg')
|
|
||||||
.datum(chartData)
|
|
||||||
.transition().duration(500)
|
|
||||||
.call(fanStatusChart);
|
|
||||||
}
|
|
@ -0,0 +1,144 @@
|
|||||||
|
//var bulbChart;
|
||||||
|
//
|
||||||
|
//nv.addGraph(function () {
|
||||||
|
//
|
||||||
|
// bulbChart = nv.models.lineChart()
|
||||||
|
// .interpolate("step-after")
|
||||||
|
// .options({
|
||||||
|
// transitionDuration: 300,
|
||||||
|
// useInteractiveGuideline: true
|
||||||
|
// })
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// bulbChart.xScale(d3.time.scale());
|
||||||
|
//
|
||||||
|
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||||
|
// bulbChart.xAxis
|
||||||
|
// .axisLabel("Date/Time")
|
||||||
|
// .ticks(d3.time.seconds)
|
||||||
|
// .tickFormat(function (d) {
|
||||||
|
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||||
|
// })
|
||||||
|
// .staggerLabels(true)
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// bulbChart.yAxis
|
||||||
|
// .axisLabel('ON / OFF')
|
||||||
|
// .tickValues(1)
|
||||||
|
// .tickFormat(function(d) {
|
||||||
|
// return d == 1 ? 'ON' : 'OFF'
|
||||||
|
// })
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// d3.select('.chart6 svg')
|
||||||
|
// .datum(getBulbChartData())
|
||||||
|
// .call(bulbChart);
|
||||||
|
//
|
||||||
|
// nv.utils.windowResize(bulbChart.update);
|
||||||
|
//
|
||||||
|
// return bulbChart;
|
||||||
|
//});
|
||||||
|
//
|
||||||
|
//function getBulbChartData() {
|
||||||
|
//
|
||||||
|
// return [
|
||||||
|
// {
|
||||||
|
// area: true,
|
||||||
|
// values: [],
|
||||||
|
// key: "Bulb",
|
||||||
|
// color: "#34500e"
|
||||||
|
// }
|
||||||
|
// ];
|
||||||
|
//
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
function updateBulbGraph(bulbData) {
|
||||||
|
|
||||||
|
//var chartData = getBulbChartData();
|
||||||
|
//chartData[0]['values'] = fanData;
|
||||||
|
//
|
||||||
|
//d3.select('.chart6 svg')
|
||||||
|
// .datum(chartData)
|
||||||
|
// .transition().duration(500)
|
||||||
|
// .call(bulbChart);
|
||||||
|
renderBulbChart(bulbData);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function renderBulbChart(chartData){
|
||||||
|
var chartWrapperElmId = "#canvas-wrapper5";
|
||||||
|
var chartCanvasId="canvas5";
|
||||||
|
|
||||||
|
if(chartData.length==0){
|
||||||
|
$(chartWrapperElmId).html("No data available...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var label=[];
|
||||||
|
var data=[];
|
||||||
|
var maxLabels=20;
|
||||||
|
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||||
|
for(i=0;i<chartData.length;i++) {
|
||||||
|
if(i%showLabel==0) {
|
||||||
|
var timeStamp = new Date(chartData[i].x);
|
||||||
|
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||||
|
}else{
|
||||||
|
label.push("");
|
||||||
|
}
|
||||||
|
data.push(chartData[i].y);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
console.log(label);
|
||||||
|
|
||||||
|
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||||
|
var lineChartData = {
|
||||||
|
labels : label,
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
fillColor : "rgba(61, 144, 215, 0.2)",
|
||||||
|
strokeColor : "rgba(61, 144, 215, 1)",
|
||||||
|
pointColor : "rgba(61, 144, 215, 1)",
|
||||||
|
pointStrokeColor : "#fff",
|
||||||
|
data : data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
};
|
||||||
|
var canvas = document.getElementById(chartCanvasId);
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
myLine = new Chart(ctx).Line(lineChartData, {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scaleLabel: function (valuePayload) {
|
||||||
|
if (Number(valuePayload.value) === 0) {
|
||||||
|
return 'OFF';
|
||||||
|
} else if (Number(valuePayload.value) === 1) {
|
||||||
|
return 'ON';
|
||||||
|
}else{
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scaleStartValue: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function customFormat(timeStamp, formatString){
|
||||||
|
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||||
|
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||||
|
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||||
|
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||||
|
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||||
|
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||||
|
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||||
|
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||||
|
|
||||||
|
h=(hhh=timeStamp.getHours());
|
||||||
|
if (h==0) h=24;
|
||||||
|
if (h>12) h-=12;
|
||||||
|
hh = h<10?('0'+h):h;
|
||||||
|
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||||
|
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||||
|
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||||
|
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||||
|
}
|
@ -0,0 +1,143 @@
|
|||||||
|
//var fanChart;
|
||||||
|
//
|
||||||
|
//nv.addGraph(function () {
|
||||||
|
//
|
||||||
|
// fanChart = nv.models.lineChart()
|
||||||
|
// .interpolate("step-after")
|
||||||
|
// .options({
|
||||||
|
// transitionDuration: 300,
|
||||||
|
// useInteractiveGuideline: true
|
||||||
|
// })
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// fanChart.xScale(d3.time.scale());
|
||||||
|
//
|
||||||
|
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||||
|
// fanChart.xAxis
|
||||||
|
// .axisLabel("Date/Time")
|
||||||
|
// .ticks(d3.time.seconds)
|
||||||
|
// .tickFormat(function (d) {
|
||||||
|
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||||
|
// })
|
||||||
|
// .staggerLabels(true)
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// fanChart.yAxis
|
||||||
|
// .axisLabel('Fan (Status)')
|
||||||
|
// .tickFormat(function(d) {
|
||||||
|
// return d == 1 ? 'ON' : 'OFF'
|
||||||
|
// })
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// d3.select('.chart5 svg')
|
||||||
|
// .datum(getFanChartData())
|
||||||
|
// .call(fanChart);
|
||||||
|
//
|
||||||
|
// nv.utils.windowResize(fanChart.update);
|
||||||
|
//
|
||||||
|
// return fanChart;
|
||||||
|
//});
|
||||||
|
//
|
||||||
|
//function getFanChartData() {
|
||||||
|
//
|
||||||
|
// return [
|
||||||
|
// {
|
||||||
|
// area: true,
|
||||||
|
// values: [],
|
||||||
|
// key: "Fan",
|
||||||
|
// color: "#34500e"
|
||||||
|
// }
|
||||||
|
// ];
|
||||||
|
//
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
function updateFanGraph(fanData) {
|
||||||
|
|
||||||
|
//var chartData = getFanChartData();
|
||||||
|
//chartData[0]['values'] = fanData;
|
||||||
|
//
|
||||||
|
//d3.select('.chart5 svg')
|
||||||
|
// .datum(chartData)
|
||||||
|
// .transition().duration(500)
|
||||||
|
// .call(fanChart);
|
||||||
|
renderFanChart(fanData);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function renderFanChart(chartData){
|
||||||
|
var chartWrapperElmId = "#canvas-wrapper6";
|
||||||
|
var chartCanvasId="canvas6";
|
||||||
|
|
||||||
|
if(chartData.length==0){
|
||||||
|
$(chartWrapperElmId).html("No data available...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var label=[];
|
||||||
|
var data=[];
|
||||||
|
var maxLabels=20;
|
||||||
|
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||||
|
for(i=0;i<chartData.length;i++) {
|
||||||
|
if(i%showLabel==0) {
|
||||||
|
var timeStamp = new Date(chartData[i].x);
|
||||||
|
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||||
|
}else{
|
||||||
|
label.push("");
|
||||||
|
}
|
||||||
|
data.push(chartData[i].y);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
console.log(label);
|
||||||
|
|
||||||
|
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||||
|
var lineChartData = {
|
||||||
|
labels : label,
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
fillColor : "rgba(221,100,64, 0.2)",
|
||||||
|
strokeColor : "rgba(221,100,64, 1)",
|
||||||
|
pointColor : "rgba(221,100,64, 1)",
|
||||||
|
pointStrokeColor : "#fff",
|
||||||
|
data : data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
};
|
||||||
|
var canvas = document.getElementById(chartCanvasId);
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
myLine = new Chart(ctx).Line(lineChartData, {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
scaleLabel: function (valuePayload) {
|
||||||
|
if (Number(valuePayload.value) === 0) {
|
||||||
|
return 'OFF';
|
||||||
|
} else if (Number(valuePayload.value) === 1) {
|
||||||
|
return 'ON';
|
||||||
|
}else{
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scaleStartValue: 0
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function customFormat(timeStamp, formatString){
|
||||||
|
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||||
|
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||||
|
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||||
|
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||||
|
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||||
|
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||||
|
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||||
|
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||||
|
|
||||||
|
h=(hhh=timeStamp.getHours());
|
||||||
|
if (h==0) h=24;
|
||||||
|
if (h>12) h-=12;
|
||||||
|
hh = h<10?('0'+h):h;
|
||||||
|
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||||
|
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||||
|
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||||
|
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||||
|
}
|
@ -0,0 +1,130 @@
|
|||||||
|
//var lightChart;
|
||||||
|
//
|
||||||
|
//nv.addGraph(function () {
|
||||||
|
//
|
||||||
|
// lightChart = nv.models.lineChart()
|
||||||
|
// .interpolate("linear")
|
||||||
|
// .options({
|
||||||
|
// transitionDuration: 300,
|
||||||
|
// useInteractiveGuideline: true
|
||||||
|
// })
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// lightChart.xScale(d3.time.scale());
|
||||||
|
//
|
||||||
|
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||||
|
// lightChart.xAxis
|
||||||
|
// .axisLabel("Date/Time")
|
||||||
|
// .ticks(d3.time.seconds)
|
||||||
|
// .tickFormat(function (d) {
|
||||||
|
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||||
|
// })
|
||||||
|
// .staggerLabels(true)
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// lightChart.yAxis
|
||||||
|
// .axisLabel('Light')
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// d3.select('.chart2 svg')
|
||||||
|
// .datum(getLightChartData())
|
||||||
|
// .call(lightChart);
|
||||||
|
//
|
||||||
|
// nv.utils.windowResize(lightChart.update);
|
||||||
|
//
|
||||||
|
// return lightChart;
|
||||||
|
//});
|
||||||
|
//
|
||||||
|
//function getLightChartData() {
|
||||||
|
//
|
||||||
|
// return [
|
||||||
|
// {
|
||||||
|
// area: true,
|
||||||
|
// values: [],
|
||||||
|
// key: "Light",
|
||||||
|
// color: "#34500e"
|
||||||
|
// }
|
||||||
|
// ];
|
||||||
|
//
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
function updateLightGraph(lightData) {
|
||||||
|
|
||||||
|
//var chartData = getLightChartData();
|
||||||
|
//chartData[0]['values'] = lightData;
|
||||||
|
//
|
||||||
|
//d3.select('.chart2 svg')
|
||||||
|
// .datum(chartData)
|
||||||
|
// .transition().duration(500)
|
||||||
|
// .call(lightChart);
|
||||||
|
renderLightChart(lightData);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function renderLightChart(chartData){
|
||||||
|
var chartWrapperElmId = "#canvas-wrapper2";
|
||||||
|
var chartCanvasId="canvas2";
|
||||||
|
|
||||||
|
if(chartData.length==0){
|
||||||
|
$(chartWrapperElmId).html("No data available...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var label=[];
|
||||||
|
var data=[];
|
||||||
|
var maxLabels=20;
|
||||||
|
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||||
|
for(i=0;i<chartData.length;i++) {
|
||||||
|
if(i%showLabel==0) {
|
||||||
|
var timeStamp = new Date(chartData[i].x);
|
||||||
|
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||||
|
}else{
|
||||||
|
label.push("");
|
||||||
|
}
|
||||||
|
data.push(chartData[i].y);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
console.log(label);
|
||||||
|
|
||||||
|
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||||
|
var lineChartData = {
|
||||||
|
labels : label,
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
fillColor : "rgba(255, 174, 0, 0.2)",
|
||||||
|
strokeColor : "rgba(255, 174, 0, 1)",
|
||||||
|
pointColor : "rgba(255, 174, 0, 1)",
|
||||||
|
pointStrokeColor : "#fff",
|
||||||
|
data : data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
};
|
||||||
|
var canvas = document.getElementById(chartCanvasId);
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
myLine = new Chart(ctx).Line(lineChartData, {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function customFormat(timeStamp, formatString){
|
||||||
|
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||||
|
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||||
|
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||||
|
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||||
|
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||||
|
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||||
|
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||||
|
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||||
|
|
||||||
|
h=(hhh=timeStamp.getHours());
|
||||||
|
if (h==0) h=24;
|
||||||
|
if (h>12) h-=12;
|
||||||
|
hh = h<10?('0'+h):h;
|
||||||
|
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||||
|
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||||
|
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||||
|
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||||
|
}
|
@ -0,0 +1,130 @@
|
|||||||
|
//var motionChart;
|
||||||
|
//
|
||||||
|
//nv.addGraph(function () {
|
||||||
|
//
|
||||||
|
// motionChart = nv.models.lineChart()
|
||||||
|
// .interpolate("linear")
|
||||||
|
// .options({
|
||||||
|
// transitionDuration: 300,
|
||||||
|
// useInteractiveGuideline: true
|
||||||
|
// })
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// motionChart.xScale(d3.time.scale());
|
||||||
|
//
|
||||||
|
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||||
|
// motionChart.xAxis
|
||||||
|
// .axisLabel("Date/Time")
|
||||||
|
// .ticks(d3.time.seconds)
|
||||||
|
// .tickFormat(function (d) {
|
||||||
|
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||||
|
// })
|
||||||
|
// .staggerLabels(true)
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// motionChart.yAxis
|
||||||
|
// .axisLabel('Motion')
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// d3.select('.chart3 svg')
|
||||||
|
// .datum(getMotionChartData())
|
||||||
|
// .call(motionChart);
|
||||||
|
//
|
||||||
|
// nv.utils.windowResize(motionChart.update);
|
||||||
|
//
|
||||||
|
// return motionChart;
|
||||||
|
//});
|
||||||
|
//
|
||||||
|
//function getMotionChartData() {
|
||||||
|
//
|
||||||
|
// return [
|
||||||
|
// {
|
||||||
|
// area: true,
|
||||||
|
// values: [],
|
||||||
|
// key: "Motion",
|
||||||
|
// color: "#34500e"
|
||||||
|
// }
|
||||||
|
// ];
|
||||||
|
//
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
function updateMotionGraph(motionData) {
|
||||||
|
|
||||||
|
//var chartData = getMotionChartData();
|
||||||
|
//chartData[0]['values'] = motionData;
|
||||||
|
//
|
||||||
|
//d3.select('.chart3 svg')
|
||||||
|
// .datum(chartData)
|
||||||
|
// .transition().duration(500)
|
||||||
|
// .call(motionChart);
|
||||||
|
renderMotionChart(motionData);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function renderMotionChart(chartData){
|
||||||
|
var chartWrapperElmId = "#canvas-wrapper3";
|
||||||
|
var chartCanvasId="canvas3";
|
||||||
|
|
||||||
|
if(chartData.length==0){
|
||||||
|
$(chartWrapperElmId).html("No data available...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var label=[];
|
||||||
|
var data=[];
|
||||||
|
var maxLabels=20;
|
||||||
|
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||||
|
for(i=0;i<chartData.length;i++) {
|
||||||
|
if(i%showLabel==0) {
|
||||||
|
var timeStamp = new Date(chartData[i].x);
|
||||||
|
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||||
|
}else{
|
||||||
|
label.push("");
|
||||||
|
}
|
||||||
|
data.push(chartData[i].y);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
console.log(label);
|
||||||
|
|
||||||
|
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||||
|
var lineChartData = {
|
||||||
|
labels : label,
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
fillColor : "rgba(255, 0, 115, 0.2)",
|
||||||
|
strokeColor : "rgba(255, 0, 115, 1)",
|
||||||
|
pointColor : "rgba(255, 0, 115, 1)",
|
||||||
|
pointStrokeColor : "#fff",
|
||||||
|
data : data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
};
|
||||||
|
var canvas = document.getElementById(chartCanvasId);
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
myLine = new Chart(ctx).Line(lineChartData, {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function customFormat(timeStamp, formatString){
|
||||||
|
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||||
|
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||||
|
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||||
|
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||||
|
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||||
|
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||||
|
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||||
|
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||||
|
|
||||||
|
h=(hhh=timeStamp.getHours());
|
||||||
|
if (h==0) h=24;
|
||||||
|
if (h>12) h-=12;
|
||||||
|
hh = h<10?('0'+h):h;
|
||||||
|
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||||
|
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||||
|
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||||
|
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||||
|
}
|
@ -0,0 +1,130 @@
|
|||||||
|
//var sonarChart;
|
||||||
|
//
|
||||||
|
//nv.addGraph(function () {
|
||||||
|
//
|
||||||
|
// sonarChart = nv.models.lineChart()
|
||||||
|
// .interpolate("linear")
|
||||||
|
// .options({
|
||||||
|
// transitionDuration: 300,
|
||||||
|
// useInteractiveGuideline: true
|
||||||
|
// })
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// sonarChart.xScale(d3.time.scale());
|
||||||
|
//
|
||||||
|
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||||
|
// sonarChart.xAxis
|
||||||
|
// .axisLabel("Date/Time")
|
||||||
|
// .ticks(d3.time.seconds)
|
||||||
|
// .tickFormat(function (d) {
|
||||||
|
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||||
|
// })
|
||||||
|
// .staggerLabels(true)
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// sonarChart.yAxis
|
||||||
|
// .axisLabel('Sonar')
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// d3.select('.chart4 svg')
|
||||||
|
// .datum(getSonarChartData())
|
||||||
|
// .call(sonarChart);
|
||||||
|
//
|
||||||
|
// nv.utils.windowResize(sonarChart.update);
|
||||||
|
//
|
||||||
|
// return sonarChart;
|
||||||
|
//});
|
||||||
|
//
|
||||||
|
//function getSonarChartData() {
|
||||||
|
//
|
||||||
|
// return [
|
||||||
|
// {
|
||||||
|
// area: true,
|
||||||
|
// values: [],
|
||||||
|
// key: "Sonar",
|
||||||
|
// color: "#34500e"
|
||||||
|
// }
|
||||||
|
// ];
|
||||||
|
//
|
||||||
|
//}
|
||||||
|
//
|
||||||
|
function updateSonarGraph(sonarData) {
|
||||||
|
//
|
||||||
|
// var chartData = getSonarChartData();
|
||||||
|
// chartData[0]['values'] = sonarData;
|
||||||
|
//
|
||||||
|
// d3.select('.chart4 svg')
|
||||||
|
// .datum(chartData)
|
||||||
|
// .transition().duration(500)
|
||||||
|
// .call(sonarChart);
|
||||||
|
renderSonarChart(sonarData);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function renderSonarChart(chartData){
|
||||||
|
var chartWrapperElmId = "#canvas-wrapper4";
|
||||||
|
var chartCanvasId="canvas4";
|
||||||
|
|
||||||
|
if(chartData.length==0){
|
||||||
|
$(chartWrapperElmId).html("No data available...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var label=[];
|
||||||
|
var data=[];
|
||||||
|
var maxLabels=20;
|
||||||
|
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||||
|
for(i=0;i<chartData.length;i++) {
|
||||||
|
if(i%showLabel==0) {
|
||||||
|
var timeStamp = new Date(chartData[i].x);
|
||||||
|
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||||
|
}else{
|
||||||
|
label.push("");
|
||||||
|
}
|
||||||
|
data.push(chartData[i].y);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
console.log(label);
|
||||||
|
|
||||||
|
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||||
|
var lineChartData = {
|
||||||
|
labels : label,
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
fillColor : "rgba(90, 130, 232, 0.2)",
|
||||||
|
strokeColor : "rgba(90, 130, 232, 1)",
|
||||||
|
pointColor : "rgba(90, 130, 232, 1)",
|
||||||
|
pointStrokeColor : "#fff",
|
||||||
|
data : data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
};
|
||||||
|
var canvas = document.getElementById(chartCanvasId);
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
myLine = new Chart(ctx).Line(lineChartData, {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function customFormat(timeStamp, formatString){
|
||||||
|
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||||
|
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||||
|
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||||
|
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||||
|
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||||
|
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||||
|
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||||
|
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||||
|
|
||||||
|
h=(hhh=timeStamp.getHours());
|
||||||
|
if (h==0) h=24;
|
||||||
|
if (h>12) h-=12;
|
||||||
|
hh = h<10?('0'+h):h;
|
||||||
|
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||||
|
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||||
|
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||||
|
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||||
|
}
|
@ -0,0 +1,137 @@
|
|||||||
|
//var temperatureChart;
|
||||||
|
//
|
||||||
|
//nv.addGraph(function () {
|
||||||
|
// var height = 350;
|
||||||
|
// temperatureChart = nv.models.lineChart();
|
||||||
|
//
|
||||||
|
// temperatureChart.margin({left: 100}) ; //Adjust chart margins to give the x-axis some breathing room.
|
||||||
|
// temperatureChart.useInteractiveGuideline(true) ; //We want nice looking tooltips and a guideline!
|
||||||
|
// temperatureChart.showLegend(true) ; //Show the legend, allowing users to turn on/off line series.
|
||||||
|
// temperatureChart.showYAxis(true) ; //Show the y-axis
|
||||||
|
// temperatureChart.showXAxis(true) ; //Show the x-axis
|
||||||
|
// temperatureChart.height(height) ; //Show the x-axis
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// temperatureChart.xScale(d3.time.scale());
|
||||||
|
// temperatureChart.forceY([0,100]);
|
||||||
|
//
|
||||||
|
// // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||||
|
// temperatureChart.xAxis
|
||||||
|
// .axisLabel("Date/Time")
|
||||||
|
// .ticks(d3.time.seconds)
|
||||||
|
// .tickFormat(function (d) {
|
||||||
|
// return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
||||||
|
// })
|
||||||
|
// .staggerLabels(true)
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// temperatureChart.yAxis
|
||||||
|
// .axisLabel('Temperature (C)')
|
||||||
|
// ;
|
||||||
|
//
|
||||||
|
// d3.select('.chart1 svg')
|
||||||
|
// .datum(getTemperatureChartData())
|
||||||
|
// .call(temperatureChart)
|
||||||
|
// .transition().duration(500)
|
||||||
|
// .style({'height': height });
|
||||||
|
// nv.utils.windowResize(temperatureChart.update);
|
||||||
|
//
|
||||||
|
// return temperatureChart;
|
||||||
|
//});
|
||||||
|
//
|
||||||
|
//function getTemperatureChartData() {
|
||||||
|
//
|
||||||
|
// return [
|
||||||
|
// {
|
||||||
|
// area: true,
|
||||||
|
// values: [],
|
||||||
|
// key: "Temperature"
|
||||||
|
// }
|
||||||
|
// ];
|
||||||
|
//
|
||||||
|
//}
|
||||||
|
|
||||||
|
function updateTemperatureGraph(temperatureData) {
|
||||||
|
|
||||||
|
//var chartData = getTemperatureChartData();
|
||||||
|
//chartData[0]['values'] = temperatureData;
|
||||||
|
//
|
||||||
|
//d3.select('.chart1 svg')
|
||||||
|
// .datum(chartData)
|
||||||
|
// .transition().duration(500)
|
||||||
|
// .call(temperatureChart);
|
||||||
|
//
|
||||||
|
//temperatureChart.forceY([0,30]);
|
||||||
|
//
|
||||||
|
//nv.utils.windowResize(temperatureChart.update);
|
||||||
|
console.log("temperatureData");
|
||||||
|
renderTemperatureChart(temperatureData);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTemperatureChart(chartData){
|
||||||
|
var chartWrapperElmId = "#canvas-wrapper1";
|
||||||
|
var chartCanvasId="canvas1";
|
||||||
|
|
||||||
|
if(chartData.length==0){
|
||||||
|
$(chartWrapperElmId).html("No data available...");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var label=[];
|
||||||
|
var data=[];
|
||||||
|
var maxLabels=20;
|
||||||
|
var showLabel=Math.floor(chartData.length/maxLabels);
|
||||||
|
for(i=0;i<chartData.length;i++) {
|
||||||
|
if(i%showLabel==0) {
|
||||||
|
var timeStamp = new Date(chartData[i].x);
|
||||||
|
label.push(customFormat(timeStamp, "#DD#/#MM#/#YYYY# #hh#:#mm#:#ss# #ampm#"));
|
||||||
|
}else{
|
||||||
|
label.push("");
|
||||||
|
}
|
||||||
|
data.push(chartData[i].y);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
console.log(label);
|
||||||
|
|
||||||
|
$(chartWrapperElmId).html("").html('<canvas id="'+chartCanvasId+'" height="350" width="100%"></canvas>');
|
||||||
|
var lineChartData = {
|
||||||
|
labels : label,
|
||||||
|
datasets : [
|
||||||
|
{
|
||||||
|
fillColor : "rgba(49, 195, 166, 0.2)",
|
||||||
|
strokeColor : "rgba(49, 195, 166, 1)",
|
||||||
|
pointColor : "rgba(49, 195, 166, 1)",
|
||||||
|
pointStrokeColor : "#fff",
|
||||||
|
data : data
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
};
|
||||||
|
var canvas = document.getElementById(chartCanvasId);
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
|
||||||
|
myLine = new Chart(ctx).Line(lineChartData, {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function customFormat(timeStamp, formatString){
|
||||||
|
var YYYY,YY,MMMM,MMM,MM,M,DDDD,DDD,DD,D,hhh,hh,h,mm,m,ss,s,ampm,AMPM,dMod,th;
|
||||||
|
YY = ((YYYY=timeStamp.getFullYear())+"").slice(-2);
|
||||||
|
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
||||||
|
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
||||||
|
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
||||||
|
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
||||||
|
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
||||||
|
formatString = formatString.replace("#YYYY#",YYYY).replace("#YY#",YY).replace("#MMMM#",MMMM).replace("#MMM#",MMM).replace("#MM#",MM).replace("#M#",M).replace("#DDDD#",DDDD).replace("#DDD#",DDD).replace("#DD#",DD).replace("#D#",D).replace("#th#",th);
|
||||||
|
|
||||||
|
h=(hhh=timeStamp.getHours());
|
||||||
|
if (h==0) h=24;
|
||||||
|
if (h>12) h-=12;
|
||||||
|
hh = h<10?('0'+h):h;
|
||||||
|
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
||||||
|
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
||||||
|
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
||||||
|
return formatString.replace("#hhh#",hhh).replace("#hh#",hh).replace("#h#",h).replace("#mm#",mm).replace("#m#",m).replace("#ss#",ss).replace("#s#",s).replace("#ampm#",ampm).replace("#AMPM#",AMPM);
|
||||||
|
}
|
@ -1,60 +0,0 @@
|
|||||||
var lightChart;
|
|
||||||
|
|
||||||
nv.addGraph(function () {
|
|
||||||
|
|
||||||
lightChart = nv.models.lineChart()
|
|
||||||
.interpolate("linear")
|
|
||||||
.options({
|
|
||||||
transitionDuration: 300,
|
|
||||||
useInteractiveGuideline: true
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
lightChart.xScale(d3.time.scale());
|
|
||||||
|
|
||||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
||||||
lightChart.xAxis
|
|
||||||
.axisLabel("Date/Time")
|
|
||||||
.ticks(d3.time.seconds)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
|
||||||
})
|
|
||||||
.staggerLabels(true)
|
|
||||||
;
|
|
||||||
|
|
||||||
lightChart.yAxis
|
|
||||||
.axisLabel('Light')
|
|
||||||
;
|
|
||||||
|
|
||||||
d3.select('.chart2 svg')
|
|
||||||
.datum(getLightChartData())
|
|
||||||
.call(lightChart);
|
|
||||||
|
|
||||||
nv.utils.windowResize(lightChart.update);
|
|
||||||
|
|
||||||
return lightChart;
|
|
||||||
});
|
|
||||||
|
|
||||||
function getLightChartData() {
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
area: true,
|
|
||||||
values: [],
|
|
||||||
key: "Light",
|
|
||||||
color: "#34500e"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateLightGraph(lightData) {
|
|
||||||
|
|
||||||
var chartData = getLightChartData();
|
|
||||||
chartData[0]['values'] = lightData;
|
|
||||||
|
|
||||||
d3.select('.chart2 svg')
|
|
||||||
.datum(chartData)
|
|
||||||
.transition().duration(500)
|
|
||||||
.call(lightChart);
|
|
||||||
}
|
|
@ -1,4 +0,0 @@
|
|||||||
function onRequest(context){
|
|
||||||
context.sketchPath = "api/device/sketch";
|
|
||||||
return context;
|
|
||||||
}
|
|
@ -1,60 +0,0 @@
|
|||||||
var motionChart;
|
|
||||||
|
|
||||||
nv.addGraph(function () {
|
|
||||||
|
|
||||||
motionChart = nv.models.lineChart()
|
|
||||||
.interpolate("linear")
|
|
||||||
.options({
|
|
||||||
transitionDuration: 300,
|
|
||||||
useInteractiveGuideline: true
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
motionChart.xScale(d3.time.scale());
|
|
||||||
|
|
||||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
||||||
motionChart.xAxis
|
|
||||||
.axisLabel("Date/Time")
|
|
||||||
.ticks(d3.time.seconds)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
|
||||||
})
|
|
||||||
.staggerLabels(true)
|
|
||||||
;
|
|
||||||
|
|
||||||
motionChart.yAxis
|
|
||||||
.axisLabel('Motion')
|
|
||||||
;
|
|
||||||
|
|
||||||
d3.select('.chart3 svg')
|
|
||||||
.datum(getMotionChartData())
|
|
||||||
.call(motionChart);
|
|
||||||
|
|
||||||
nv.utils.windowResize(motionChart.update);
|
|
||||||
|
|
||||||
return motionChart;
|
|
||||||
});
|
|
||||||
|
|
||||||
function getMotionChartData() {
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
area: true,
|
|
||||||
values: [],
|
|
||||||
key: "Motion",
|
|
||||||
color: "#34500e"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateMotionGraph(motionData) {
|
|
||||||
|
|
||||||
var chartData = getMotionChartData();
|
|
||||||
chartData[0]['values'] = motionData;
|
|
||||||
|
|
||||||
d3.select('.chart3 svg')
|
|
||||||
.datum(chartData)
|
|
||||||
.transition().duration(500)
|
|
||||||
.call(motionChart);
|
|
||||||
}
|
|
@ -1,60 +0,0 @@
|
|||||||
var sonarChart;
|
|
||||||
|
|
||||||
nv.addGraph(function () {
|
|
||||||
|
|
||||||
sonarChart = nv.models.lineChart()
|
|
||||||
.interpolate("linear")
|
|
||||||
.options({
|
|
||||||
transitionDuration: 300,
|
|
||||||
useInteractiveGuideline: true
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
sonarChart.xScale(d3.time.scale());
|
|
||||||
|
|
||||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
||||||
sonarChart.xAxis
|
|
||||||
.axisLabel("Date/Time")
|
|
||||||
.ticks(d3.time.seconds)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
|
||||||
})
|
|
||||||
.staggerLabels(true)
|
|
||||||
;
|
|
||||||
|
|
||||||
sonarChart.yAxis
|
|
||||||
.axisLabel('Sonar')
|
|
||||||
;
|
|
||||||
|
|
||||||
d3.select('.chart4 svg')
|
|
||||||
.datum(getSonarChartData())
|
|
||||||
.call(sonarChart);
|
|
||||||
|
|
||||||
nv.utils.windowResize(sonarChart.update);
|
|
||||||
|
|
||||||
return sonarChart;
|
|
||||||
});
|
|
||||||
|
|
||||||
function getSonarChartData() {
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
area: true,
|
|
||||||
values: [],
|
|
||||||
key: "Sonar",
|
|
||||||
color: "#34500e"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateSonarGraph(sonarData) {
|
|
||||||
|
|
||||||
var chartData = getSonarChartData();
|
|
||||||
chartData[0]['values'] = sonarData;
|
|
||||||
|
|
||||||
d3.select('.chart4 svg')
|
|
||||||
.datum(chartData)
|
|
||||||
.transition().duration(500)
|
|
||||||
.call(sonarChart);
|
|
||||||
}
|
|
@ -1,60 +0,0 @@
|
|||||||
var temperatureChart;
|
|
||||||
|
|
||||||
nv.addGraph(function () {
|
|
||||||
|
|
||||||
temperatureChart = nv.models.lineChart()
|
|
||||||
.interpolate("linear")
|
|
||||||
.options({
|
|
||||||
transitionDuration: 300,
|
|
||||||
useInteractiveGuideline: true
|
|
||||||
})
|
|
||||||
;
|
|
||||||
|
|
||||||
temperatureChart.xScale(d3.time.scale());
|
|
||||||
|
|
||||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
|
||||||
temperatureChart.xAxis
|
|
||||||
.axisLabel("Date/Time")
|
|
||||||
.ticks(d3.time.seconds)
|
|
||||||
.tickFormat(function (d) {
|
|
||||||
return d3.time.format('%m/%d/%Y %I:%M:%S %p')(new Date(d))
|
|
||||||
})
|
|
||||||
.staggerLabels(true)
|
|
||||||
;
|
|
||||||
|
|
||||||
temperatureChart.yAxis
|
|
||||||
.axisLabel('Temperature (C)')
|
|
||||||
;
|
|
||||||
|
|
||||||
d3.select('.chart1 svg')
|
|
||||||
.datum(getTemperatureChartData())
|
|
||||||
.call(temperatureChart);
|
|
||||||
|
|
||||||
nv.utils.windowResize(temperatureChart.update);
|
|
||||||
|
|
||||||
return temperatureChart;
|
|
||||||
});
|
|
||||||
|
|
||||||
function getTemperatureChartData() {
|
|
||||||
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
area: true,
|
|
||||||
values: [],
|
|
||||||
key: "Temperature",
|
|
||||||
color: "#34500e"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateTemperatureGraph(temperatureData) {
|
|
||||||
|
|
||||||
var chartData = getTemperatureChartData();
|
|
||||||
chartData[0]['values'] = temperatureData;
|
|
||||||
|
|
||||||
d3.select('.chart1 svg')
|
|
||||||
.datum(chartData)
|
|
||||||
.transition().duration(500)
|
|
||||||
.call(temperatureChart);
|
|
||||||
}
|
|
After Width: | Height: | Size: 9.6 KiB |
After Width: | Height: | Size: 8.0 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 15 KiB |
@ -1,4 +1,4 @@
|
|||||||
function onRequest(context){
|
function onRequest(context){
|
||||||
context.sketchPath = "api/device/sketch";
|
return context;
|
||||||
return context;
|
}
|
||||||
}
|
|