diff --git a/mdot/mdot_server/mdot_server/app/css/test.css b/mdot/mdot_server/mdot_server/app/css/test.css new file mode 100644 index 0000000..19ca14e --- /dev/null +++ b/mdot/mdot_server/mdot_server/app/css/test.css @@ -0,0 +1,3 @@ +.panel { + background-color: rgba(255,255,255,0.95); + } diff --git a/mdot/mdot_server/mdot_server/app/js/mdot.js b/mdot/mdot_server/mdot_server/app/js/mdot.js index b1327a0..980e16d 100644 --- a/mdot/mdot_server/mdot_server/app/js/mdot.js +++ b/mdot/mdot_server/mdot_server/app/js/mdot.js @@ -5,6 +5,7 @@ (function($) { + var GraphView; var mqttConfig = { orgId: 'qz0da4', userName: 'a-qz0da4-dfwwdkmkzr', @@ -229,12 +230,15 @@ }); - var GraphView = Backbone.View.extend({ + GraphView = Backbone.View.extend({ el: $('#graph'), template: _.template($('#AMChart-template').html()), initialize: function() { this.modes = ['', 'lux', 'temp', 'co2', 'humid', 'noise']; - this.titles = ['','Light Levels','Temperature','Co2 Levels','Humidity','Sound']; + this.titles = [ + '', 'Light Levels', 'Temperature', 'Co2 Levels', 'Humidity', 'Sound' + ]; + this.otherTitles = ['Co2 Levels', 'Humidity']; this.mode = 0; // Config AMChart @@ -279,6 +283,139 @@ console.log('new mode:', this.mode); }, + makeAxis: function(params) { + let title = params.title || 'Missing title'; + let color = params.color || '#ff0000'; + let position = params.position || 'left'; + + var newAxis = new AmCharts.ValueAxis(); + newAxis.tickLength = 0; + newAxis.axisAlpha = 0; + newAxis.showFirstLabel = false; + newAxis.showLastLabel = false; + newAxis.title = title; + newAxis.position = position; + newAxis.gridColor = '#FFFFFF'; + newAxis.axisColor = '#cccccc'; + newAxis.color = color; + + return newAxis; + }, + makeGraph: function(params) { + + if (!params.hasOwnProperty('valueField')) { + console.error('MakeGraph - missing required field'); + } + + let lineColor = params.lineColor || 'rgba(46,255,0,1)'; + let valueField = params.valueField; + let title = params.title || 'Missing title'; + + let valueAxis = params.valueAxis || null; + let labelPosition = params.labelPosition || 'left'; + + var graph = new AmCharts.AmGraph(); + + graph.lineColor = lineColor; + graph.labelColor = lineColor; + graph.valueField = valueField; + graph.balloonText = title + ':[[value]]'; + + graph.title = title; + + if (valueAxis) { + graph.valueAxis = valueAxis; + } + graph.legendValueText = '[[description]]/[[value]]'; + + graph.labelPosition = labelPosition; + graph.showBalloon = true; + + return graph; + }, + doChart: function(mode, chartData) { + var chartScrollbar; + var chartCursor; + var graph; + var valueAxis; + var categoryAxis; + var self = this; + var otherAxis; + console.log(chartData); + + console.log('Doing chart now'); + + //Debugger; + // SERIAL CHART + self.chart = new AmCharts.AmSerialChart(); + + //"2016-08-10T23:04:31.000Z" + self.chart.dataProvider = chartData; + self.chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ'; + self.chart.categoryField = 'date'; + self.chart.color = '#ffffff'; + self.chart.marginLeft = 0; + + // AXES + // category + categoryAxis = self.chart.categoryAxis; + categoryAxis.parseDates = true; // As our data is date-based, we set parseDates to true + categoryAxis.minPeriod = 'mm'; + categoryAxis.gridAlpha = 0.2; + categoryAxis.minorGridAlpha = 0; + categoryAxis.axisAlpha = 0.5; + categoryAxis.minorGridEnabled = true; + categoryAxis.gridColor = '#FFFFFF'; + categoryAxis.axisColor = '#cccccc'; + categoryAxis.inside = true; + + valueAxis = self.makeAxis({ + title: this.titles[this.mode], color: 'rgba(46,255,0,1)' + }); + self.chart.addValueAxis(valueAxis); + + if (mode > 5) { + + otherAxis = self.makeAxis({ + title: this.otherTitles[mode - 6], + color: 'rgba(0,191,255,1)', + position: 'right' + }); + self.chart.addValueAxis(otherAxis); + } + + graph = self.makeGraph({ + valueField: 'value', title: this.titles[this.mode] + }); + self.chart.addGraph(graph); + + if (mode > 5) { + var otherGraph = self.makeGraph({ + lineColor: 'rgba(0,191,255,1)', + valueField: 'valueB', + title: this.otherTitles[mode - 6], + valueAxis: otherAxis, + labelPosition: 'right' + }); + self.chart.addGraph(otherGraph); + + } + + // CURSOR + chartCursor = new AmCharts.ChartCursor(); + chartCursor.valueLineEnabled = true; + chartCursor.valueLineBalloonEnabled = true; + self.chart.addChartCursor(chartCursor); + + // SCROLLBAR + chartScrollbar = new AmCharts.ChartScrollbar(); + chartScrollbar.graph = graph; + chartScrollbar.position = 'bottom'; + self.chart.addChartScrollbar(chartScrollbar); + + $('#chartdiv').empty(); + self.chart.write('chartdiv'); + }, updateGraph: function() { var self = this; let getMode = this.modes[this.mode]; @@ -297,11 +434,13 @@ 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]); @@ -332,149 +471,7 @@ }, this); - console.log(chartData); - - console.log('Doing chart now'); - - //Debugger; - // SERIAL CHART - self.chart = new AmCharts.AmSerialChart(); - - //"2016-08-10T23:04:31.000Z" - self.chart.dataProvider = chartData; - self.chart.dataDateFormat = 'YYYY-MM-DDTHH:NN:SS.QQQ'; - self.chart.categoryField = 'date'; - - // AXES - // category - var categoryAxis = self.chart.categoryAxis; - categoryAxis.parseDates = true; // As our data is date-based, we set parseDates to true - categoryAxis.minPeriod = 'mm'; // Our data is daily, so we set minPeriod to DD - categoryAxis.gridAlpha = 0.1; - categoryAxis.minorGridAlpha = 0.1; - categoryAxis.axisAlpha = 0; - categoryAxis.minorGridEnabled = true; - categoryAxis.inside = true; - - // Value - var valueAxis = new AmCharts.ValueAxis(); - valueAxis.tickLength = 0; - valueAxis.axisAlpha = 0; - valueAxis.showFirstLabel = false; - valueAxis.showLastLabel = false; - valueAxis.title = this.titles[this.mode]; - valueAxis.position = 'left'; - self.chart.addValueAxis(valueAxis); - - if (mode === 6) { - var co2Axis = new AmCharts.ValueAxis(); - co2Axis.tickLength = 0; - co2Axis.axisAlpha = 0; - co2Axis.showFirstLabel = false; - co2Axis.showLastLabel = false; - co2Axis.title = 'Co2 Levels'; - co2Axis.position = 'right'; - self.chart.addValueAxis(co2Axis); - - } - - if (mode === 7) { - var otherAxis = new AmCharts.ValueAxis(); - otherAxis.tickLength = 0; - otherAxis.axisAlpha = 0; - otherAxis.showFirstLabel = false; - otherAxis.showLastLabel = false; - otherAxis.title = 'Humidity'; - otherAxis.position = 'right'; - self.chart.addValueAxis(otherAxis); - - } - - - // GRAPH - var graph = new AmCharts.AmGraph(); - graph.dashLength = 3; - graph.lineColor = '#00CC00'; - graph.valueField = 'value'; - graph.dashLength = 3; - graph.bullet = 'round'; - graph.balloonText = '[[category]]
value:[[value]]'; - self.chart.addGraph(graph); - - - if (mode === 6) { - var co2graph = new AmCharts.AmGraph(); - co2graph.valueField = 'valueB'; - co2graph.title = 'Co2'; - co2graph.type = 'line'; - co2graph.valueAxis = co2Axis; // Indicate which axis should be used - co2graph.lineColor = '#786c56'; - co2graph.lineThickness = 1; - co2graph.legendValueText = '[[description]]/[[value]]'; - - co2graph.bullet = 'round'; - co2graph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size - co2graph.bulletBorderColor = '#786c56'; - co2graph.bulletBorderAlpha = 1; - co2graph.bulletBorderThickness = 2; - co2graph.bulletColor = '#000000'; - //Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets. - co2graph.labelPosition = 'right'; - //Co2graph.balloonText = "latitude:[[value]]"; - co2graph.showBalloon = true; - co2graph.dashLengthField = 'dashLength'; - self.chart.addGraph(co2graph); - - } - - if (mode === 7) { - var otherGraph = new AmCharts.AmGraph(); - otherGraph.valueField = 'valueB'; - otherGraph.title = 'Humidity'; - otherGraph.type = 'line'; - otherGraph.valueAxis = otherAxis; // Indicate which axis should be used - otherGraph.lineColor = '#786c56'; - otherGraph.lineThickness = 1; - otherGraph.legendValueText = '[[description]]/[[value]]'; - - otherGraph.bullet = 'round'; - otherGraph.bulletSizeField = 'townSize'; // Indicate which field should be used for bullet size - otherGraph.bulletBorderColor = '#786c56'; - otherGraph.bulletBorderAlpha = 1; - otherGraph.bulletBorderThickness = 2; - otherGraph.bulletColor = '#000000'; - //Co2graph.labelText = "[[townName2]]"; // not all data points has townName2 specified, that's why labels are displayed only near some of the bullets. - otherGraph.labelPosition = 'right'; - //Co2graph.balloonText = "latitude:[[value]]"; - otherGraph.showBalloon = true; - otherGraph.dashLengthField = 'dashLength'; - self.chart.addGraph(otherGraph); - - } - // CURSOR - var chartCursor = new AmCharts.ChartCursor(); - chartCursor.valueLineEnabled = true; - chartCursor.valueLineBalloonEnabled = true; - self.chart.addChartCursor(chartCursor); - - // SCROLLBAR - var chartScrollbar = new AmCharts.ChartScrollbar(); - self.chart.addChartScrollbar(chartScrollbar); - - /* // HORIZONTAL GREEN RANGE - var guide = new AmCharts.Guide(); - guide.value = 525; - guide.toValue = 575; - guide.fillColor = '#00CC00'; - guide.inside = true; - guide.fillAlpha = 0.2; - guide.lineAlpha = 0; - valueAxis.addGuide(guide);*/ - - // WRITE - - $('#chartdiv').empty(); - self.chart.write('chartdiv'); + self.doChart(mode, chartData); } diff --git a/mdot/mdot_server/mdot_server/app/test.html b/mdot/mdot_server/mdot_server/app/test.html index ac0f38c..2f89e04 100644 --- a/mdot/mdot_server/mdot_server/app/test.html +++ b/mdot/mdot_server/mdot_server/app/test.html @@ -4,14 +4,15 @@ Title + - +
-
+