charithag
10 years ago
parent
0b9e14ddb3
commit
9af5baef1b
@ -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;
|
||||||
|
}
|
||||||
@ -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;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@ -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) {
|
function updateBulbGraph(bulbData) {
|
||||||
|
|
||||||
//var chartData = getBulbChartData();
|
|
||||||
//chartData[0]['values'] = fanData;
|
|
||||||
//
|
|
||||||
//d3.select('.chart6 svg')
|
|
||||||
// .datum(chartData)
|
|
||||||
// .transition().duration(500)
|
|
||||||
// .call(bulbChart);
|
|
||||||
renderBulbChart(bulbData);
|
renderBulbChart(bulbData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function renderBulbChart(chartData){
|
function renderBulbChart(chartDataRaw){
|
||||||
var chartWrapperElmId = "#canvas-wrapper5";
|
var chartWrapperElmId = "#canvas-wrapper6";
|
||||||
var chartCanvasId="canvas5";
|
if (chartDataRaw.length == 0) {
|
||||||
|
|
||||||
if(chartData.length==0){
|
|
||||||
$(chartWrapperElmId).html("No data available...");
|
$(chartWrapperElmId).html("No data available...");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var label=[];
|
|
||||||
var data=[];
|
var chartData = [[], []];
|
||||||
var maxLabels=20;
|
for (var i = 0; i < chartDataRaw.length; i++){
|
||||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
|
||||||
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);
|
//var i = parseInt(fromDate);
|
||||||
console.log(label);
|
//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 chartDiv = "chart6";
|
||||||
var lineChartData = {
|
var sliderDiv = "slider6";
|
||||||
labels : label,
|
var x_axis = "x_axis6";
|
||||||
datasets : [
|
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>');
|
||||||
fillColor : "rgba(61, 144, 215, 0.2)",
|
|
||||||
strokeColor : "rgba(61, 144, 215, 1)",
|
var graph = new Rickshaw.Graph({
|
||||||
pointColor : "rgba(61, 144, 215, 1)",
|
element: document.getElementById(chartDiv),
|
||||||
pointStrokeColor : "#fff",
|
width: 1100,
|
||||||
data : data
|
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]}
|
||||||
]
|
]
|
||||||
|
});
|
||||||
|
|
||||||
};
|
graph.registerRenderer(new Rickshaw.Graph.Renderer.BarNoGap({graph: graph}));
|
||||||
var canvas = document.getElementById(chartCanvasId);
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
|
|
||||||
myLine = new Chart(ctx).Line(lineChartData, {
|
graph.render();
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
var xAxis = new Rickshaw.Graph.Axis.X({
|
||||||
scaleLabel: function (valuePayload) {
|
graph: graph,
|
||||||
if (Number(valuePayload.value) === 0) {
|
orientation: 'bottom',
|
||||||
return 'OFF';
|
element: document.getElementById(x_axis),
|
||||||
} else if (Number(valuePayload.value) === 1) {
|
tickFormat: graph.x.tickFormat()
|
||||||
return 'ON';
|
});
|
||||||
}else{
|
|
||||||
return '';
|
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){
|
yAxis.render();
|
||||||
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());
|
var slider = new Rickshaw.Graph.RangeSlider.Preview({
|
||||||
if (h==0) h=24;
|
graph: graph,
|
||||||
if (h>12) h-=12;
|
element: document.getElementById(sliderDiv)
|
||||||
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,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) {
|
function updateFanGraph(fanData) {
|
||||||
|
|
||||||
//var chartData = getFanChartData();
|
|
||||||
//chartData[0]['values'] = fanData;
|
|
||||||
//
|
|
||||||
//d3.select('.chart5 svg')
|
|
||||||
// .datum(chartData)
|
|
||||||
// .transition().duration(500)
|
|
||||||
// .call(fanChart);
|
|
||||||
renderFanChart(fanData);
|
renderFanChart(fanData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderFanChart(chartDataRaw) {
|
||||||
|
var chartWrapperElmId = "#canvas-wrapper5";
|
||||||
|
|
||||||
function renderFanChart(chartData){
|
if (chartDataRaw.length == 0) {
|
||||||
var chartWrapperElmId = "#canvas-wrapper6";
|
|
||||||
var chartCanvasId="canvas6";
|
|
||||||
|
|
||||||
if(chartData.length==0){
|
|
||||||
$(chartWrapperElmId).html("No data available...");
|
$(chartWrapperElmId).html("No data available...");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var label=[];
|
|
||||||
var data=[];
|
var chartData = [[], []];
|
||||||
var maxLabels=20;
|
for (var i = 0; i < chartDataRaw.length; i++){
|
||||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
|
||||||
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);
|
//var i = parseInt(fromDate);
|
||||||
console.log(label);
|
//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 chartDiv = "chart5";
|
||||||
var lineChartData = {
|
var sliderDiv = "slider5";
|
||||||
labels : label,
|
var x_axis = "x_axis5";
|
||||||
datasets : [
|
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>');
|
||||||
fillColor : "rgba(221,100,64, 0.2)",
|
|
||||||
strokeColor : "rgba(221,100,64, 1)",
|
var graph = new Rickshaw.Graph({
|
||||||
pointColor : "rgba(221,100,64, 1)",
|
element: document.getElementById(chartDiv),
|
||||||
pointStrokeColor : "#fff",
|
width: 1100,
|
||||||
data : data
|
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]}
|
||||||
]
|
]
|
||||||
|
});
|
||||||
|
|
||||||
};
|
graph.registerRenderer(new Rickshaw.Graph.Renderer.BarNoGap({graph: graph}));
|
||||||
var canvas = document.getElementById(chartCanvasId);
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
|
|
||||||
myLine = new Chart(ctx).Line(lineChartData, {
|
graph.render();
|
||||||
responsive: true,
|
|
||||||
maintainAspectRatio: false,
|
var xAxis = new Rickshaw.Graph.Axis.X({
|
||||||
scaleLabel: function (valuePayload) {
|
graph: graph,
|
||||||
if (Number(valuePayload.value) === 0) {
|
orientation: 'bottom',
|
||||||
return 'OFF';
|
element: document.getElementById(x_axis),
|
||||||
} else if (Number(valuePayload.value) === 1) {
|
tickFormat: graph.x.tickFormat()
|
||||||
return 'ON';
|
});
|
||||||
}else{
|
|
||||||
return '';
|
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){
|
yAxis.render();
|
||||||
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());
|
var slider = new Rickshaw.Graph.RangeSlider.Preview({
|
||||||
if (h==0) h=24;
|
graph: graph,
|
||||||
if (h>12) h-=12;
|
element: document.getElementById(sliderDiv)
|
||||||
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,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) {
|
function updateLightGraph(lightData) {
|
||||||
|
|
||||||
//var chartData = getLightChartData();
|
|
||||||
//chartData[0]['values'] = lightData;
|
|
||||||
//
|
|
||||||
//d3.select('.chart2 svg')
|
|
||||||
// .datum(chartData)
|
|
||||||
// .transition().duration(500)
|
|
||||||
// .call(lightChart);
|
|
||||||
renderLightChart(lightData);
|
renderLightChart(lightData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function renderLightChart(chartData){
|
function renderLightChart(chartDataRaw){
|
||||||
var chartWrapperElmId = "#canvas-wrapper2";
|
var chartWrapperElmId = "#canvas-wrapper2";
|
||||||
var chartCanvasId="canvas2";
|
if (chartDataRaw.length == 0) {
|
||||||
|
|
||||||
if(chartData.length==0){
|
|
||||||
$(chartWrapperElmId).html("No data available...");
|
$(chartWrapperElmId).html("No data available...");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var label=[];
|
|
||||||
var data=[];
|
var chartData = [[], []];
|
||||||
var maxLabels=20;
|
for (var i = 0; i < chartDataRaw.length; i++){
|
||||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
|
||||||
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);
|
//var i = parseInt(fromDate);
|
||||||
console.log(label);
|
//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 chartDiv = "chart2";
|
||||||
var lineChartData = {
|
var sliderDiv = "slider2";
|
||||||
labels : label,
|
var x_axis = "x_axis2";
|
||||||
datasets : [
|
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>');
|
||||||
fillColor : "rgba(255, 174, 0, 0.2)",
|
|
||||||
strokeColor : "rgba(255, 174, 0, 1)",
|
var graph = new Rickshaw.Graph({
|
||||||
pointColor : "rgba(255, 174, 0, 1)",
|
element: document.getElementById(chartDiv),
|
||||||
pointStrokeColor : "#fff",
|
width: 1100,
|
||||||
data : data
|
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}));
|
||||||
|
|
||||||
};
|
graph.render();
|
||||||
var canvas = document.getElementById(chartCanvasId);
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
|
|
||||||
myLine = new Chart(ctx).Line(lineChartData, {
|
var xAxis = new Rickshaw.Graph.Axis.X({
|
||||||
responsive: true,
|
graph: graph,
|
||||||
maintainAspectRatio: false
|
orientation: 'bottom',
|
||||||
|
element: document.getElementById(x_axis),
|
||||||
|
tickFormat: graph.x.tickFormat()
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
function customFormat(timeStamp, formatString){
|
xAxis.render();
|
||||||
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());
|
var yAxis = new Rickshaw.Graph.Axis.Y({
|
||||||
if (h==0) h=24;
|
graph: graph,
|
||||||
if (h>12) h-=12;
|
orientation: 'left',
|
||||||
hh = h<10?('0'+h):h;
|
element: document.getElementById(y_axis),
|
||||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
width: 40,
|
||||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
height: 160,
|
||||||
ss=(s=timeStamp.getSeconds())<10?('0'+s):s;
|
tickFormat: function (y) {
|
||||||
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);
|
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)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
@ -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) {
|
function updateMotionGraph(motionData) {
|
||||||
|
|
||||||
//var chartData = getMotionChartData();
|
|
||||||
//chartData[0]['values'] = motionData;
|
|
||||||
//
|
|
||||||
//d3.select('.chart3 svg')
|
|
||||||
// .datum(chartData)
|
|
||||||
// .transition().duration(500)
|
|
||||||
// .call(motionChart);
|
|
||||||
renderMotionChart(motionData);
|
renderMotionChart(motionData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function renderMotionChart(chartData){
|
function renderMotionChart(chartDataRaw){
|
||||||
var chartWrapperElmId = "#canvas-wrapper3";
|
var chartWrapperElmId = "#canvas-wrapper3";
|
||||||
var chartCanvasId="canvas3";
|
|
||||||
|
|
||||||
if(chartData.length==0){
|
if (chartDataRaw.length == 0) {
|
||||||
$(chartWrapperElmId).html("No data available...");
|
$(chartWrapperElmId).html("No data available...");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var label=[];
|
|
||||||
var data=[];
|
var chartData = [];
|
||||||
var maxLabels=20;
|
for (var i = 0; i < chartDataRaw.length; i++){
|
||||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
|
||||||
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);
|
//var i = parseInt(fromDate);
|
||||||
console.log(label);
|
//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 graph = new Rickshaw.Graph({
|
||||||
var lineChartData = {
|
element: document.getElementById(chartDiv),
|
||||||
labels : label,
|
width: 1110,
|
||||||
datasets : [
|
height: 400,
|
||||||
{
|
strokeWidth: 0.5,
|
||||||
fillColor : "rgba(255, 0, 115, 0.2)",
|
renderer: 'line',
|
||||||
strokeColor : "rgba(255, 0, 115, 1)",
|
xScale: d3.time.scale(),
|
||||||
pointColor : "rgba(255, 0, 115, 1)",
|
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
|
||||||
pointStrokeColor : "#fff",
|
series:[
|
||||||
data : data
|
{ color: '#2F0B3A', data: chartData }
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
});
|
||||||
|
|
||||||
};
|
graph.render();
|
||||||
var canvas = document.getElementById(chartCanvasId);
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
|
|
||||||
myLine = new Chart(ctx).Line(lineChartData, {
|
var xAxis = new Rickshaw.Graph.Axis.X({
|
||||||
responsive: true,
|
graph: graph,
|
||||||
maintainAspectRatio: false
|
orientation: 'bottom',
|
||||||
|
element: document.getElementById(x_axis),
|
||||||
|
tickFormat: graph.x.tickFormat()
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
function customFormat(timeStamp, formatString){
|
xAxis.render();
|
||||||
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());
|
var yAxis = new Rickshaw.Graph.Axis.Y({
|
||||||
if (h==0) h=24;
|
graph: graph,
|
||||||
if (h>12) h-=12;
|
orientation: 'left',
|
||||||
hh = h<10?('0'+h):h;
|
element: document.getElementById(y_axis),
|
||||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
width: 40,
|
||||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
height: 410
|
||||||
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)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
@ -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) {
|
function updateSonarGraph(sonarData) {
|
||||||
//
|
|
||||||
// var chartData = getSonarChartData();
|
|
||||||
// chartData[0]['values'] = sonarData;
|
|
||||||
//
|
|
||||||
// d3.select('.chart4 svg')
|
|
||||||
// .datum(chartData)
|
|
||||||
// .transition().duration(500)
|
|
||||||
// .call(sonarChart);
|
|
||||||
renderSonarChart(sonarData);
|
renderSonarChart(sonarData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderSonarChart(chartDataRaw){
|
||||||
function renderSonarChart(chartData){
|
|
||||||
var chartWrapperElmId = "#canvas-wrapper4";
|
var chartWrapperElmId = "#canvas-wrapper4";
|
||||||
var chartCanvasId="canvas4";
|
|
||||||
|
|
||||||
if(chartData.length==0){
|
if (chartDataRaw.length == 0) {
|
||||||
$(chartWrapperElmId).html("No data available...");
|
$(chartWrapperElmId).html("No data available...");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var label=[];
|
|
||||||
var data=[];
|
var chartData = [];
|
||||||
var maxLabels=20;
|
for (var i = 0; i < chartDataRaw.length; i++){
|
||||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
|
||||||
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);
|
//var i = parseInt(fromDate);
|
||||||
console.log(label);
|
//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 graph = new Rickshaw.Graph({
|
||||||
var lineChartData = {
|
element: document.getElementById(chartDiv),
|
||||||
labels : label,
|
width: 1110,
|
||||||
datasets : [
|
height: 400,
|
||||||
{
|
strokeWidth: 1,
|
||||||
fillColor : "rgba(90, 130, 232, 0.2)",
|
renderer: 'line',
|
||||||
strokeColor : "rgba(90, 130, 232, 1)",
|
xScale: d3.time.scale(),
|
||||||
pointColor : "rgba(90, 130, 232, 1)",
|
padding: {top: 0.2, left: 0.02, right: 0.02, bottom: 0},
|
||||||
pointStrokeColor : "#fff",
|
series:[
|
||||||
data : data
|
{ color: '#170B3B', data: chartData }
|
||||||
}
|
|
||||||
]
|
]
|
||||||
|
});
|
||||||
|
|
||||||
};
|
graph.render();
|
||||||
var canvas = document.getElementById(chartCanvasId);
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
|
|
||||||
myLine = new Chart(ctx).Line(lineChartData, {
|
var xAxis = new Rickshaw.Graph.Axis.X({
|
||||||
responsive: true,
|
graph: graph,
|
||||||
maintainAspectRatio: false
|
orientation: 'bottom',
|
||||||
|
element: document.getElementById(x_axis),
|
||||||
|
tickFormat: graph.x.tickFormat()
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
function customFormat(timeStamp, formatString){
|
xAxis.render();
|
||||||
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());
|
var yAxis = new Rickshaw.Graph.Axis.Y({
|
||||||
if (h==0) h=24;
|
graph: graph,
|
||||||
if (h>12) h-=12;
|
orientation: 'left',
|
||||||
hh = h<10?('0'+h):h;
|
element: document.getElementById(y_axis),
|
||||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
width: 40,
|
||||||
mm=(m=timeStamp.getMinutes())<10?('0'+m):m;
|
height: 410
|
||||||
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)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
@ -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) {
|
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");
|
console.log("temperatureData");
|
||||||
renderTemperatureChart(temperatureData);
|
renderTemperatureChart(temperatureData);
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTemperatureChart(chartData){
|
function renderTemperatureChart(chartDataRaw){
|
||||||
var chartWrapperElmId = "#canvas-wrapper1";
|
var chartWrapperElmId = "#canvas-wrapper1";
|
||||||
var chartCanvasId="canvas1";
|
|
||||||
|
|
||||||
if(chartData.length==0){
|
if (chartDataRaw.length == 0) {
|
||||||
$(chartWrapperElmId).html("No data available...");
|
$(chartWrapperElmId).html("No data available...");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var label=[];
|
|
||||||
var data=[];
|
var chartData = [];
|
||||||
var maxLabels=20;
|
for (var i = 0; i < chartDataRaw.length; i++){
|
||||||
var showLabel=Math.floor(chartData.length/maxLabels);
|
chartData.push({x:parseInt(chartDataRaw[i].x), y:parseInt(chartDataRaw[i].y)});
|
||||||
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);
|
//var i = parseInt(fromDate);
|
||||||
console.log(label);
|
//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 chartDiv = "chart1";
|
||||||
var lineChartData = {
|
var sliderDiv = "slider1";
|
||||||
labels : label,
|
var x_axis = "x_axis1";
|
||||||
datasets : [
|
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>');
|
||||||
fillColor : "rgba(49, 195, 166, 0.2)",
|
|
||||||
strokeColor : "rgba(49, 195, 166, 1)",
|
var graph = new Rickshaw.Graph({
|
||||||
pointColor : "rgba(49, 195, 166, 1)",
|
element: document.getElementById(chartDiv),
|
||||||
pointStrokeColor : "#fff",
|
width: 1110,
|
||||||
data : data
|
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 }
|
||||||
]
|
]
|
||||||
|
});
|
||||||
|
|
||||||
};
|
graph.render();
|
||||||
var canvas = document.getElementById(chartCanvasId);
|
|
||||||
var ctx = canvas.getContext("2d");
|
|
||||||
|
|
||||||
myLine = new Chart(ctx).Line(lineChartData, {
|
var xAxis = new Rickshaw.Graph.Axis.X({
|
||||||
responsive: true,
|
graph: graph,
|
||||||
maintainAspectRatio: false
|
orientation: 'bottom',
|
||||||
|
element: document.getElementById(x_axis),
|
||||||
|
tickFormat: graph.x.tickFormat()
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
|
||||||
function customFormat(timeStamp, formatString){
|
xAxis.render();
|
||||||
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);
|
var yAxis = new Rickshaw.Graph.Axis.Y({
|
||||||
MM = (M=timeStamp.getMonth()+1)<10?('0'+M):M;
|
graph: graph,
|
||||||
//MMM = (MMMM=["January","February","March","April","May","June","July","August","September","October","November","December"][M-1]).substring(0,3);
|
orientation: 'left',
|
||||||
DD = (D=timeStamp.getDate())<10?('0'+D):D;
|
element: document.getElementById(y_axis),
|
||||||
//DDD = (DDDD=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][timeStamp.getDay()]).substring(0,3);
|
width: 40,
|
||||||
th=(D>=10&&D<=20)?'th':((dMod=D%10)==1)?'st':(dMod==2)?'nd':(dMod==3)?'rd':'th';
|
height: 410
|
||||||
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());
|
yAxis.render();
|
||||||
if (h==0) h=24;
|
|
||||||
if (h>12) h-=12;
|
var slider = new Rickshaw.Graph.RangeSlider.Preview({
|
||||||
hh = h<10?('0'+h):h;
|
graph: graph,
|
||||||
AMPM=(ampm=hhh<12?'am':'pm').toUpperCase();
|
element: document.getElementById(sliderDiv)
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue