@ -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,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){
|
||||
context.sketchPath = "api/device/sketch";
|
||||
return context;
|
||||
}
|
||||
|