Add data summerization and reduce maximum stats range to 48 hours

merge-requests/1/head
charithag 9 years ago
parent 26032a4aa2
commit f617f3c57b

@ -81,7 +81,7 @@
float: right; float: right;
padding-right: 10px; padding-right: 10px;
width: 0; width: 0;
z-index: 999; z-index: 1;
position: relative; position: relative;
opacity: 0.7; opacity: 0.7;
} }

@ -8,7 +8,7 @@
<hr> <hr>
</div> </div>
</div> </div>
<div id="rangeSliderWrapper" class="pull-right" style="width: 550px;"> <div id="rangeSliderWrapper" class="pull-right" style="width: 620px;">
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<div id="dateRangePickerContainer"> <div id="dateRangePickerContainer">
@ -16,14 +16,14 @@
<button id="hour-btn" type="button" <button id="hour-btn" type="button"
class="btn btn-default date-range">Hour class="btn btn-default date-range">Hour
</button> </button>
<button id="today-btn" type="button" <button id="h12-btn" type="button"
class="btn btn-default date-range">Day class="btn btn-default date-range">12 Hours
</button> </button>
<button id="week-btn" type="button" <button id="h24-btn" type="button"
class="btn btn-default date-range">Week class="btn btn-default date-range">24 Hours
</button> </button>
<button id="month-btn" type="button" <button id="h48-btn" type="button"
class="btn btn-default date-range">Month class="btn btn-default date-range">48 Hours
</button> </button>
<button id="date-range" type="button" <button id="date-range" type="button"
class="btn btn-default date-range last-child" class="btn btn-default date-range last-child"

@ -84,7 +84,7 @@ var configObject = {
}, },
shortcuts: 'hide', shortcuts: 'hide',
endDate: currentDay, endDate: currentDay,
maxDays: 2,
getValue: function () { getValue: function () {
return this.value; return this.value;
}, },
@ -112,28 +112,28 @@ $(document).ready(function () {
getDateTime(startDate.getTime(), endDate.getTime()); getDateTime(startDate.getTime(), endDate.getTime());
}); });
//hour picker //hour
$('#hour-btn').on('click', function () { $('#hour-btn').on('click', function () {
initDate(); initDate();
getDateTime(currentDay.getTime() - 3600000, currentDay.getTime()); getDateTime(currentDay.getTime() - 3600000, currentDay.getTime());
}); });
//day picker //12 hours
$('#today-btn').on('click', function () { $('#h12-btn').on('click', function () {
initDate(); initDate();
getDateTime(currentDay.getTime() - 86400000, currentDay.getTime()); getDateTime(currentDay.getTime() - (3600000 * 12), currentDay.getTime());
}); });
//week picker //24 hours
$('#week-btn').on('click', function () { $('#h24-btn').on('click', function () {
initDate(); initDate();
getDateTime(currentDay.getTime() - 604800000, currentDay.getTime()); getDateTime(currentDay.getTime() - (3600000 * 24), currentDay.getTime());
}); });
//month picker //48 hours
$('#month-btn').on('click', function () { $('#h48-btn').on('click', function () {
initDate(); initDate();
getDateTime(currentDay.getTime() - (604800000 * 4), currentDay.getTime()); getDateTime(currentDay.getTime() - (3600000 * 48), currentDay.getTime());
}); });
$('body').on('click', '.btn-group button', function (e) { $('body').on('click', '.btn-group button', function (e) {
@ -315,9 +315,16 @@ function drawLineGraph(graphId, chartDataRaw) {
var chartData = []; var chartData = [];
if (chartDataRaw[i].stats.length > 0) { if (chartDataRaw[i].stats.length > 0) {
for (var j = 0; j < chartDataRaw[i].stats.length; j++) { for (var j = 0; j < chartDataRaw[i].stats.length; j++) {
chartData.push({x: parseInt(chartDataRaw[i].stats[j].time), y: parseInt(chartDataRaw[i].stats[j].value)}); chartData.push({
x: parseInt(chartDataRaw[i].stats[j].time),
y: parseInt(chartDataRaw[i].stats[j].value)
});
} }
graphConfig['series'].push({'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device}); graphConfig['series'].push({
'color': color[k],
'data': summerize(chartData),
'name': chartDataRaw[i].device
});
} }
if (++k == color.length) { if (++k == color.length) {
k = 0; k = 0;
@ -358,11 +365,11 @@ function drawLineGraph(graphId, chartDataRaw) {
element: document.getElementById(sliderDiv) element: document.getElementById(sliderDiv)
}); });
var legend = new Rickshaw.Graph.Legend( { var legend = new Rickshaw.Graph.Legend({
graph: graph, graph: graph,
element: document.getElementById('legend' + graphId) element: document.getElementById('legend' + graphId)
} ); });
} }
@ -401,9 +408,16 @@ function drawBarGraph(graphId, chartDataRaw) {
var chartData = []; var chartData = [];
if (chartDataRaw[i].stats.length > 0) { if (chartDataRaw[i].stats.length > 0) {
for (var j = 0; j < chartDataRaw[i].stats.length; j++) { for (var j = 0; j < chartDataRaw[i].stats.length; j++) {
chartData.push({x: parseInt(chartDataRaw[i].stats[j].time), y: parseInt(chartDataRaw[i].stats[j].value)}); chartData.push({
x: parseInt(chartDataRaw[i].stats[j].time),
y: parseInt(chartDataRaw[i].stats[j].value)
});
} }
graphConfig['series'].push({'color': color[k], 'data': chartData, 'name': chartDataRaw[i].device}); graphConfig['series'].push({
'color': color[k],
'data': summerize(chartData),
'name': chartDataRaw[i].device
});
} }
if (++k == color.length) { if (++k == color.length) {
k = 0; k = 0;
@ -445,11 +459,11 @@ function drawBarGraph(graphId, chartDataRaw) {
element: document.getElementById(sliderDiv) element: document.getElementById(sliderDiv)
}); });
var legend = new Rickshaw.Graph.Legend( { var legend = new Rickshaw.Graph.Legend({
graph: graph, graph: graph,
element: document.getElementById('legend' + graphId) element: document.getElementById('legend' + graphId)
} ); });
} }
function scaleGraphs() { function scaleGraphs() {
@ -470,11 +484,11 @@ function scaleGraphs() {
} }
//Scale graphs //Scale graphs
var sliderX = graphWidth * 60 * 60 / (toDate - fromDate); var sliderX = graphWidth * 60 * 60000 / (toDate - fromDate);
if (sliderX < graphWidth) { if (sliderX < graphWidth) {
// fake handle move // fake handle move
if (sliderX < 100) { if (sliderX < 50) {
sliderX = 100; sliderX = 50;
} }
var edown = document.createEvent("HTMLEvents"); var edown = document.createEvent("HTMLEvents");
edown.initEvent("mousedown", true, true); edown.initEvent("mousedown", true, true);
@ -500,4 +514,20 @@ function convertDate(date) {
return date.getFullYear() + '-' + (('' + month).length < 2 ? '0' : '') return date.getFullYear() + '-' + (('' + month).length < 2 ? '0' : '')
+ month + '-' + (('' + day).length < 2 ? '0' : '') + day + " " + (('' + hour).length < 2 ? '0' : '') + month + '-' + (('' + day).length < 2 ? '0' : '') + day + " " + (('' + hour).length < 2 ? '0' : '')
+ hour + ":" + (('' + minute).length < 2 ? '0' : '') + minute; + hour + ":" + (('' + minute).length < 2 ? '0' : '') + minute;
}
function summerize(data) {
if (data.length > 1500) {
var nData = [];
var i = 1;
while (i < data.length) {
var t_avg = (data[i - 1].x + data[i].x) / 2;
var v_avg = (data[i - 1].y + data[i].y) / 2;
nData.push({x: t_avg, y: v_avg});
i += 2;
}
return summerize(nData);
} else {
return data;
}
} }
Loading…
Cancel
Save