community
/
product-iots
10
0
Fork 4
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated device statistic graphs

Browse Source
merge-requests/1/head
charithag 10 years ago
parent 0b9e14ddb3
commit 9af5baef1b
15 changed files with 609 additions and 700 deletions
Show Stats Download Patch File Download Diff File

8
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/mydevice.hbs
Unescape View File

@ -1,6 +1,8 @@
{{#zone "topCss"}}
<!--<link href="{{self.publicURL}}/css/nv.d3.css" rel="stylesheet"/>-->
<link href="{{self.publicURL}}/css/daterangepicker.css" rel="stylesheet"/>
<link href="{{self.publicURL}}/css/graph.css" rel="stylesheet"/>
<link href="{{self.publicURL}}/css/lines.css" rel="stylesheet"/>
{{/zone}}
{{#zone "topJs"}}
<!-- -->
@ -10,16 +12,18 @@
<script src="{{self.publicURL}}/js/stream_layers.js"></script>
<script src="{{self.publicURL}}/js/moment.min.js"></script>
<script src="{{self.publicURL}}/js/jquery.daterangepicker.js"></script>
<script src="{{self.publicURL}}/js/d3.v3.js"></script>
<script src="{{self.publicURL}}/js/rickshaw.min.js"></script>
{{/zone}}
{{#zone "main"}}
<div class="container container-bg white-bg">
<div class=" margin-top-double">
<div class="row row padding-top-double padding-bottom-double margin-bottom-double ">
<div class="col-lg-12 margin-top-double">
<h1 class="grey ">Device statistics</h1>
<h1 class="grey ">Device Statistics</h1>
<hr>
</div>
</div>
</div>S
<div class="row float-right margin-top">
<div class="right margin-right">
<p style="color:#000;float:left;margin-top:25px">Date Range:</p>

197
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/css/graph.css
Unescape View File

@ -0,0 +1,197 @@
/* graph */
.rickshaw_graph {
position: relative;
}
.rickshaw_graph svg {
display: block;
overflow: hidden;
}
/* ticks */
.rickshaw_graph .x_tick {
position: absolute;
top: 0;
bottom: 0;
width: 0px;
border-left: 1px dotted rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.rickshaw_graph .x_tick .title {
position: absolute;
font-size: 12px;
font-family: Arial, sans-serif;
opacity: 0.5;
white-space: nowrap;
margin-left: 3px;
bottom: 1px;
}
/* annotations */
.rickshaw_annotation_timeline {
height: 1px;
border-top: 1px solid #e0e0e0;
margin-top: 10px;
position: relative;
}
.rickshaw_annotation_timeline .annotation {
position: absolute;
height: 6px;
width: 6px;
margin-left: -2px;
top: -3px;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.25);
}
.rickshaw_graph .annotation_line {
position: absolute;
top: 0;
bottom: -6px;
width: 0px;
border-left: 2px solid rgba(0, 0, 0, 0.3);
display: none;
}
.rickshaw_graph .annotation_line.active {
display: block;
}
.rickshaw_graph .annotation_range {
background: rgba(0, 0, 0, 0.1);
display: none;
position: absolute;
top: 0;
bottom: -6px;
}
.rickshaw_graph .annotation_range.active {
display: block;
}
.rickshaw_graph .annotation_range.active.offscreen {
display: none;
}
.rickshaw_annotation_timeline .annotation .content {
background: white;
color: black;
opacity: 0.9;
padding: 5px 5px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
border-radius: 3px;
position: relative;
z-index: 20;
font-size: 12px;
padding: 6px 8px 8px;
top: 18px;
left: -11px;
width: 160px;
display: none;
cursor: pointer;
}
.rickshaw_annotation_timeline .annotation .content:before {
content: "\25b2";
position: absolute;
top: -11px;
color: white;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8);
}
.rickshaw_annotation_timeline .annotation.active,
.rickshaw_annotation_timeline .annotation:hover {
background-color: rgba(0, 0, 0, 0.8);
cursor: none;
}
.rickshaw_annotation_timeline .annotation .content:hover {
z-index: 50;
}
.rickshaw_annotation_timeline .annotation.active .content {
display: block;
}
.rickshaw_annotation_timeline .annotation:hover .content {
display: block;
z-index: 50;
}
.rickshaw_graph .y_axis,
.rickshaw_graph .x_axis_d3 {
fill: none;
}
.rickshaw_graph .y_ticks .tick line,
.rickshaw_graph .x_ticks_d3 .tick {
stroke: rgba(0, 0, 0, 0.16);
stroke-width: 2px;
shape-rendering: crisp-edges;
pointer-events: none;
}
.rickshaw_graph .y_grid .tick,
.rickshaw_graph .x_grid_d3 .tick {
z-index: -1;
stroke: rgba(0, 0, 0, 0.20);
stroke-width: 1px;
stroke-dasharray: 1 1;
}
.rickshaw_graph .y_grid .tick[data-y-value="0"] {
stroke-dasharray: 1 0;
}
.rickshaw_graph .y_grid path,
.rickshaw_graph .x_grid_d3 path {
fill: none;
stroke: none;
}
.rickshaw_graph .y_ticks path,
.rickshaw_graph .x_ticks_d3 path {
fill: none;
stroke: #808080;
}
.rickshaw_graph .y_ticks text,
.rickshaw_graph .x_ticks_d3 text {
opacity: 0.5;
font-size: 12px;
pointer-events: none;
}
.rickshaw_graph .x_tick.glow .title,
.rickshaw_graph .y_ticks.glow text {
fill: black;
color: black;
text-shadow:
-1px 1px 0 rgba(255, 255, 255, 0.1),
1px -1px 0 rgba(255, 255, 255, 0.1),
1px 1px 0 rgba(255, 255, 255, 0.1),
0px 1px 0 rgba(255, 255, 255, 0.1),
0px -1px 0 rgba(255, 255, 255, 0.1),
1px 0px 0 rgba(255, 255, 255, 0.1),
-1px 0px 0 rgba(255, 255, 255, 0.1),
-1px -1px 0 rgba(255, 255, 255, 0.1);
}
.rickshaw_graph .x_tick.inverse .title,
.rickshaw_graph .y_ticks.inverse text {
fill: white;
color: white;
text-shadow:
-1px 1px 0 rgba(0, 0, 0, 0.8),
1px -1px 0 rgba(0, 0, 0, 0.8),
1px 1px 0 rgba(0, 0, 0, 0.8),
0px 1px 0 rgba(0, 0, 0, 0.8),
0px -1px 0 rgba(0, 0, 0, 0.8),
1px 0px 0 rgba(0, 0, 0, 0.8),
-1px 0px 0 rgba(0, 0, 0, 0.8),
-1px -1px 0 rgba(0, 0, 0, 0.8);
}
.custom_rickshaw_graph {
position: relative;
left: 40px;
}
.custom_y_axis {
position: absolute;
width: 40px;
}
.custom_slider {
left: 40px;
}
.custom_x_axis {
position: relative;
left: 40px;
height: 40px;
}

21
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/css/lines.css
Unescape View File

@ -0,0 +1,21 @@
div, span, p, td {
font-family: Arial, sans-serif;
}
#chart {
display: inline-block;
}
#legend {
display: inline-block;
position: relative;
left: 8px;
}
#legend_container {
position: absolute;
right: 0;
bottom: 26px;
width: 0;
}
#chart_container {
float: left;
position: relative;
}

0
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/Chart.min.js vendored
Unescape View File

5
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/d3.v3.js vendored
View File

File diff suppressed because one or more lines are too long

0
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/date-range.js
Unescape View File

35
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graph_util.js
Unescape View File

@ -1,6 +1,16 @@
var fromDate;
var toDate;
// create a custom bar renderer that has no gaps
Rickshaw.Graph.Renderer.BarNoGap = Rickshaw.Class.create(Rickshaw.Graph.Renderer.Bar, {
name: 'bar_no_gap',
barWidth: function (series) {
var frequentInterval = this._frequentInterval(series.stack);
var barWidth = this.graph.x(series.stack[0].x + frequentInterval.magnitude * 1);
return barWidth;
}
});
var configObject = {
format: 'DD.MM.YYYY HH:mm',
@ -134,7 +144,32 @@ function updateGraphs(stats) {
console.log("bulbData...");
console.log(bulbData);
updateBulbGraph(convertStateStatsToGraphData(bulbData));
scaleGraphs();
}
function scaleGraphs() {
//Scale graphs
var sliderX = 1110 * 60 * 60 / (toDate - fromDate);
if (sliderX < 1110) {
// fake handle move
if (sliderX < 100) {
sliderX = 100;
}
var edown = document.createEvent("HTMLEvents");
edown.initEvent("mousedown", true, true);
edown.clientX = 1160;
var emove = document.createEvent("HTMLEvents");
emove.initEvent("mousemove", true, true);
emove.clientX = sliderX;
var eup = document.createEvent("HTMLEvents");
eup.initEvent("mouseup", true, true);
var sliders = $('.right_handle');
for (var slider in sliders) {
sliders[slider].dispatchEvent(edown);
document.dispatchEvent(emove);
document.dispatchEvent(eup);
}
}
}
function convertStatsToGraphData(stats) {

189
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/bulb_graph.js
Unescape View File

@ -1,144 +1,83 @@
//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){
function renderBulbChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper6";
if (chartDataRaw.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);
var chartData = [[], []];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
console.log(data);
console.log(label);
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)) {
// var rnd = Math.round(Math.random());
// chartData[0].push({x: i * 1000, y: rnd});
// chartData[1].push({x: i * 1000, y: Math.abs(rnd - 1)});
// i += 60 * 5;
//}
$(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 chartDiv = "chart6";
var sliderDiv = "slider6";
var x_axis = "x_axis6";
var y_axis = "y_axis6";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1100,
height: 150,
strokeWidth: 0.5,
renderer: 'bar_no_gap',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series: [
{color: '#5E610B', data: chartData[0]},
{color: 'white', data: chartData[1]}
]
});
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
graph.registerRenderer(new Rickshaw.Graph.Renderer.BarNoGap({graph: graph}));
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 '';
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 160,
tickFormat: function (y) {
switch (y) {
case 1:
return 'ON';
case 0:
return 'OFF';
default :
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);
yAxis.render();
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);
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

188
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/fan_graph.js
Unescape View File

@ -1,143 +1,83 @@
//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(chartDataRaw) {
var chartWrapperElmId = "#canvas-wrapper5";
function renderFanChart(chartData){
var chartWrapperElmId = "#canvas-wrapper6";
var chartCanvasId="canvas6";
if(chartData.length==0){
if (chartDataRaw.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);
var chartData = [[], []];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
console.log(data);
console.log(label);
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)) {
// var rnd = Math.round(Math.random());
// chartData[0].push({x: i * 1000, y: rnd});
// chartData[1].push({x: i * 1000, y: Math.abs(rnd - 1)});
// i += 60 * 5;
//}
$(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 chartDiv = "chart5";
var sliderDiv = "slider5";
var x_axis = "x_axis5";
var y_axis = "y_axis5";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1100,
height: 150,
strokeWidth: 0.5,
renderer: 'bar_no_gap',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series: [
{color: '#2F0B3A', data: chartData[0]},
{color: 'white', data: chartData[1]}
]
});
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
graph.registerRenderer(new Rickshaw.Graph.Renderer.BarNoGap({graph: graph}));
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 '';
graph.render();
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 160,
tickFormat: function (y) {
switch (y) {
case 1:
return 'ON';
case 0:
return 'OFF';
default :
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);
yAxis.render();
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);
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

175
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/light_graph.js
Unescape View File

@ -1,130 +1,83 @@
//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){
function renderLightChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper2";
var chartCanvasId="canvas2";
if(chartData.length==0){
if (chartDataRaw.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);
var chartData = [[], []];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
console.log(data);
console.log(label);
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)) {
// var rnd = Math.round(Math.random());
// chartData[0].push({x: i * 1000, y: rnd});
// chartData[1].push({x: i * 1000, y: Math.abs(rnd - 1)});
// i += 60 * 5;
//}
$(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 chartDiv = "chart2";
var sliderDiv = "slider2";
var x_axis = "x_axis2";
var y_axis = "y_axis2";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1100,
height: 150,
strokeWidth: 0.5,
renderer: 'bar_no_gap',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series: [
{color: 'steelblue', data: chartData[0]},
{color: 'white', data: chartData[1]}
]
});
graph.registerRenderer(new Rickshaw.Graph.Renderer.BarNoGap({graph: graph}));
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
graph.render();
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
}
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);
xAxis.render();
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);
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 160,
tickFormat: function (y) {
switch (y) {
case 1:
return 'ON';
case 0:
return 'OFF';
default :
return '';
}
}
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

160
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/motion_graph.js
Unescape View File

@ -1,130 +1,70 @@
//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){
function renderMotionChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper3";
var chartCanvasId="canvas3";
if(chartData.length==0){
if (chartDataRaw.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);
var chartData = [];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
console.log(data);
console.log(label);
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)){
// var rnd = Math.random() * (30 - 20) + 20;
// chartData.push({x:i * 1000, y:rnd});
// i += 60 * 5;
//}
var chartDiv = "chart3";
var sliderDiv = "slider3";
var x_axis = "x_axis3";
var y_axis = "y_axis3";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
$(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 graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1110,
height: 400,
strokeWidth: 0.5,
renderer: 'line',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[
{ color: '#2F0B3A', data: chartData }
]
});
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
graph.render();
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
}
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);
xAxis.render();
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);
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

161
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/sonar_graph.js
Unescape View File

@ -1,130 +1,69 @@
//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){
function renderSonarChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper4";
var chartCanvasId="canvas4";
if(chartData.length==0){
if (chartDataRaw.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);
var chartData = [];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
console.log(data);
console.log(label);
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)){
// var rnd = Math.random() * (30 - 20) + 20;
// chartData.push({x:i * 1000, y:rnd});
// i += 60 * 5;
//}
var chartDiv = "chart4";
var sliderDiv = "slider4";
var x_axis = "x_axis4";
var y_axis = "y_axis4";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
$(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 graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1110,
height: 400,
strokeWidth: 1,
renderer: 'line',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[
{ color: '#170B3B', data: chartData }
]
});
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
graph.render();
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
}
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);
xAxis.render();
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);
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

167
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/graphs/temperature_graph.js
Unescape View File

@ -1,137 +1,70 @@
//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){
function renderTemperatureChart(chartDataRaw){
var chartWrapperElmId = "#canvas-wrapper1";
var chartCanvasId="canvas1";
if(chartData.length==0){
if (chartDataRaw.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);
var chartData = [];
for (var i = 0; i < chartDataRaw.length; i++){
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
}
console.log(data);
console.log(label);
//var i = parseInt(fromDate);
//while (i < parseInt(toDate)){
// var rnd = Math.random() * (30 - 20) + 20;
// chartData.push({x:i * 1000, y:rnd});
// i += 60 * 5;
//}
$(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 chartDiv = "chart1";
var sliderDiv = "slider1";
var x_axis = "x_axis1";
var y_axis = "y_axis1";
$(chartWrapperElmId).html("").html('<div id="' + y_axis + '" class="custom_y_axis"></div><div id="' + chartDiv + '" class="custom_rickshaw_graph"></div><div id="' + x_axis + '" class="custom_x_axis"></div><div id="' + sliderDiv + '" class="custom_slider"></div>');
var graph = new Rickshaw.Graph({
element: document.getElementById(chartDiv),
width: 1110,
height: 400,
strokeWidth: 1,
renderer: 'line',
xScale: d3.time.scale(),
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
series:[
{ color: '#FF4000', data: chartData }
]
});
};
var canvas = document.getElementById(chartCanvasId);
var ctx = canvas.getContext("2d");
graph.render();
myLine = new Chart(ctx).Line(lineChartData, {
responsive: true,
maintainAspectRatio: false
var xAxis = new Rickshaw.Graph.Axis.X({
graph: graph,
orientation: 'bottom',
element: document.getElementById(x_axis),
tickFormat: graph.x.tickFormat()
});
}
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);
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph,
orientation: 'left',
element: document.getElementById(y_axis),
width: 40,
height: 410
});
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);
yAxis.render();
var slider = new Rickshaw.Graph.RangeSlider.Preview({
graph: graph,
element: document.getElementById(sliderDiv)
});
}

0
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/linewithfocuschart.js
Unescape View File

3
modules/distribution/src/repository/jaggeryapps/iot/units/mydevice/public/js/rickshaw.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save