diff --git a/mdot/mdot_server/mdot_server/app/css/test.css b/mdot/mdot_server/mdot_server/app/css/test.css index 19ca14e..eec97a3 100644 --- a/mdot/mdot_server/mdot_server/app/css/test.css +++ b/mdot/mdot_server/mdot_server/app/css/test.css @@ -1,3 +1,5 @@ .panel { background-color: rgba(255,255,255,0.95); + + color:rgba(255,0,99,1); } diff --git a/mdot/mdot_server/mdot_server/app/js/mdot.js b/mdot/mdot_server/mdot_server/app/js/mdot.js index 980e16d..dbf4b84 100644 --- a/mdot/mdot_server/mdot_server/app/js/mdot.js +++ b/mdot/mdot_server/mdot_server/app/js/mdot.js @@ -279,7 +279,7 @@ changeMode: function() { this.mode = this.$el.find('#displaymode')[0].value; - this.updateGraph(); + this.updateGraphV2(); console.log('new mode:', this.mode); }, @@ -332,6 +332,108 @@ graph.showBalloon = true; return graph; + }, + doChartV2: function(chartData) { + var self = this; + + self.chart = AmCharts.makeChart('chartdiv', { + type: 'serial', + theme: 'light', legend: { + useGraphSettings: true + }, + color:'#ffffff', + dataProvider: chartData, + dataDateFormat: 'YYYY-MM-DDTHH:NN:SS.QQQ', + synchronizeGrid: true, + valueAxes: [{ + id: 'lux', + axisColor: '#FFC802', + axisThickness: 2, + axisAlpha: 1, + position: 'left' + }, { + id: 'co2', + axisColor: 'rgba(0,191,255,1)', + axisThickness: 2, + axisAlpha: 1, + position: 'right' + }, { + id: 'temp', + axisColor: 'rgba(46,255,0,1)', + axisThickness: 2, + gridAlpha: 0, + offset: 50, + axisAlpha: 1, + position: 'left' + }, { + id: 'humid', + axisColor: 'rgba(255,0,99,1)', + axisThickness: 2, + axisAlpha: 1, + offset: 50, + position: 'right' + }, { + id: 'noise', + axisColor: 'rgb(99, 157, 189)', + axisThickness: 2, + gridAlpha: 0, + offset: 100, + axisAlpha: 1, + position: 'left' + }], + graphs: [{ + valueAxis: 'lux', + lineColor: '#FFC802', + title: 'Light Level', + valueField: 'lux', + fillAlphas: 0 + }, { + valueAxis: 'co2', + lineColor: 'rgba(0,191,255,1)', + title: 'Co2', + valueField: 'co2', + fillAlphas: 0 + }, { + valueAxis: 'temp', + lineColor: 'rgba(46,255,0,1)', + title: 'Temperature', + valueField: 'temp', + fillAlphas: 0 + },{ + valueAxis: 'humid', + lineColor: 'rgba(255,0,99,1)', + title: 'Humidity', + valueField: 'humid', + fillAlphas: 0 + },{ + valueAxis: 'noise', + lineColor: 'rgb(99, 157, 189)', + title: 'Sound', + valueField: 'noise', + fillAlphas: 0 + }], + chartScrollbar: {}, + chartCursor: { + cursorPosition: 'mouse' + }, + categoryField: 'date', + categoryAxis: { + minPeriod:'mm', + parseDates: true, + axisColor: '#ff0000', + minorGridEnabled: true + }, + export: { + enabled: true, + position: 'bottom-right' + } + }); + + + $('#chartdiv').empty(); + self.chart.write('chartdiv'); + + }, doChart: function(mode, chartData) { var chartScrollbar; @@ -416,6 +518,22 @@ $('#chartdiv').empty(); self.chart.write('chartdiv'); }, + updateGraphV2: function() { + var self = this; + var chartData = []; + _(this.collection.models).each(function(i) { + chartData.push({ + date: i.get('dt'), + co2: i.get('co2'), + humid: i.get('humid'), + lux: i.get('lux'), + noise: i.get('noise'), + temp: i.get('temp') + }); + }); + console.log(chartData); + self.doChartV2(chartData); + }, updateGraph: function() { var self = this; let getMode = this.modes[this.mode]; @@ -434,13 +552,11 @@ var value, valueB; if (mode < 6) { value = i.get(getMode); - } - else { + } else { if (mode === 6) { value = i.get(this.modes[1]); valueB = i.get(this.modes[3]); - } - else { + } else { value = i.get(this.modes[2]); valueB = i.get(this.modes[4]); diff --git a/mdot/mdot_server/mdot_server/app/test.html b/mdot/mdot_server/mdot_server/app/test.html index 2f89e04..b5455ec 100644 --- a/mdot/mdot_server/mdot_server/app/test.html +++ b/mdot/mdot_server/mdot_server/app/test.html @@ -9,7 +9,7 @@ - +