added occupancy to the chart

This commit is contained in:
Martin Donnelly 2016-08-23 14:10:36 +01:00
parent 88cb33f29a
commit 7226a31a8e
2 changed files with 33 additions and 23 deletions

View File

@ -65,7 +65,7 @@
if (typeof branch === 'undefined') return count; if (typeof branch === 'undefined') return count;
_(branch).each(function(item) { _(branch).each(function(item) {
if ((tsMS >= new Date(item.start).getTime()) && (tsMS <= new Date(item.end).getTime())) { if ((tsMS >= item.startMS) && (tsMS <= item.endMS)) {
count = item.count; count = item.count;
return count; return count;
} }
@ -79,9 +79,13 @@
*/ */
var _tree = {}; var _tree = {};
_(occupancy).each(function(item) { _(occupancy).each(function(item) {
let newItem = item;
let day, month,year; let day, month,year;
let _date = new Date(item.start); let _date = new Date(item.start);
newItem.startMS = new Date(item.start).getTime();
newItem.endMS = new Date(item.end).getTime();
day = _date.getDate().toString(); day = _date.getDate().toString();
month = _date.getMonth().toString(); month = _date.getMonth().toString();
year = _date.getFullYear().toString(); year = _date.getFullYear().toString();
@ -101,7 +105,7 @@
_tree[year][month][day] = []; _tree[year][month][day] = [];
} }
_tree[year][month][day].push(item); _tree[year][month][day].push(newItem);
} }
@ -115,6 +119,7 @@
processAdded: function() { processAdded: function() {
console.log('Model:ProcessAdded'); console.log('Model:ProcessAdded');
console.time('processAdd');
var self = this; var self = this;
var skipOccupancy = false; var skipOccupancy = false;
var tempCollection = new Backbone.Collection(); var tempCollection = new Backbone.Collection();
@ -151,8 +156,9 @@
DeviceCollection.models = tempCollection.models; DeviceCollection.models = tempCollection.models;
console.timeEnd('processAdd');
DeviceCollection.trigger('update'); DeviceCollection.trigger('update');
notification.notify('success', 'Data loaded'); notification.notify('success', 'Data loaded');
}, decoder: function(data) { }, decoder: function(data) {
@ -316,13 +322,10 @@
doChartV2: function(chartData) { doChartV2: function(chartData) {
var self = this; var self = this;
console.time('doChartV2');
self.chart = AmCharts.makeChart('chartdiv', { self.chart = AmCharts.makeChart('chartdiv', {
type: 'serial', type: 'serial',
theme: 'light', theme: 'light',
dataSets: [
],
legend: { legend: {
useGraphSettings: true, useGraphSettings: true,
@ -392,9 +395,9 @@
], ],
graphs: [{id: 'occ', graphs: [{id: 'occ',
valueAxis: 'occupancy', valueAxis: 'occupancy',
"type": "column", type: 'column',
"clustered":true, clustered: true,
"columnWidth":1, columnWidth: 1,
lineColor: '#aaaaaa', lineColor: '#aaaaaa',
title: 'Occupancy', title: 'Occupancy',
valueField: 'occupancy', valueField: 'occupancy',
@ -439,18 +442,18 @@
}*/ }*/
], ],
chartScrollbar: { chartScrollbar: {
graph:'occ',"oppositeAxis":false, graph: 'occ',oppositeAxis: false,
"offset":30, offset: 30,
"scrollbarHeight": 80, scrollbarHeight: 80,
"backgroundAlpha": 0, backgroundAlpha: 0,
"selectedBackgroundAlpha": 0.1, selectedBackgroundAlpha: 0.1,
"selectedBackgroundColor": "#888888", selectedBackgroundColor: '#888888',
"graphFillAlpha": 0, graphFillAlpha: 0,
"graphLineAlpha": 0.5, graphLineAlpha: 0.5,
"selectedGraphFillAlpha": 0, selectedGraphFillAlpha: 0,
"selectedGraphLineAlpha": 1, selectedGraphLineAlpha: 1,
"autoGridCount":true, autoGridCount: true,
"color":"#AAAAAA" color: '#AAAAAA'
}, },
chartCursor: { chartCursor: {
cursorPosition: 'mouse', cursorPosition: 'mouse',
@ -473,9 +476,12 @@ graph:'occ',"oppositeAxis":false,
$('#chartdiv').empty(); $('#chartdiv').empty();
self.chart.write('chartdiv'); self.chart.write('chartdiv');
console.timeEnd('doChartV2');
}, updateGraphV2: function() { }, updateGraphV2: function() {
console.time('updateGraphV2');
var self = this; var self = this;
var chartData = []; var chartData = [];
console.time('chartData');
_(this.collection.models).each(function(i) { _(this.collection.models).each(function(i) {
chartData.push({ chartData.push({
date: i.get('dt'), date: i.get('dt'),
@ -487,9 +493,11 @@ graph:'occ',"oppositeAxis":false,
occupancy: i.get('occupancy') occupancy: i.get('occupancy')
}); });
}); });
console.timeEnd('chartData');
// Console.log(chartData); // Console.log(chartData);
self.doChartV2(chartData); self.doChartV2(chartData);
console.timeEnd('updateGraphV2');
} }
}); });

View File

@ -3,6 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Graph</title> <title>Graph</title>
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link href="css/mui.css" rel="stylesheet" type="text/css"/> <link href="css/mui.css" rel="stylesheet" type="text/css"/>
<link href="css/test.css" rel="stylesheet" type="text/css"/> <link href="css/test.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css"/> <link href="css/style.css" rel="stylesheet" type="text/css"/>