mirror of
https://gitlab.silvrtree.co.uk/martind2000/mdot_server.git
synced 2025-02-04 11:00:16 +00:00
optimizing the graph
This commit is contained in:
Martin Donnelly
parent
bda2eee000
commit
a80bdd3746
297
app/js/mdot.js
297
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,137 @@
|
||||
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();
|
||||
self.chart.addChartScrollbar(chartScrollbar);
|
||||
|
||||
$('#chartdiv').empty();
|
||||
self.chart.write('chartdiv');
|
||||
},
|
||||
updateGraph: function() {
|
||||
var self = this;
|
||||
let getMode = this.modes[this.mode];
|
||||
@ -297,11 +432,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,157 +469,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';
|
||||
self.chart.color = '#ffffff';
|
||||
self.chart.marginLeft = 0;
|
||||
|
||||
// AXES
|
||||
// category
|
||||
var 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;
|
||||
|
||||
// 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';
|
||||
valueAxis.gridColor = '#FFFFFF';
|
||||
valueAxis.axisColor = '#cccccc';
|
||||
valueAxis.color = 'rgba(46,255,0,1)';
|
||||
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.color = 'rgba(0,191,255,1)';
|
||||
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.lineColor = 'rgba(46,255,0,1)';
|
||||
graph.labelColor = 'rgba(46,255,0,1)';
|
||||
graph.valueField = 'value';
|
||||
graph.balloonText = '[[category]]<br><b><span style=\'font-size:14px;\'>' + this.titles[this.mode] + ':[[value]]</span></b>';
|
||||
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 = 'rgba(0,191,255,1)';
|
||||
co2graph.labelColor = 'rgba(0,191,255,1)';
|
||||
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 = 'Co2 Level:[[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 = 'rgba(0,191,255,1)';
|
||||
otherGraph.labelColor = 'rgba(0,191,255,1)';
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user