mirror of
https://gitlab.silvrtree.co.uk/martind2000/mdot_server.git
synced 2025-02-10 23:19:16 +00:00
Using AMChart
This commit is contained in:
Martin Donnelly
parent
16aa9a9506
commit
5ca1e2cfb6
169
app/js/mdot.js
169
app/js/mdot.js
@ -219,14 +219,18 @@
|
|||||||
|
|
||||||
var GraphView = Backbone.View.extend({
|
var GraphView = Backbone.View.extend({
|
||||||
el: $('#graph'),
|
el: $('#graph'),
|
||||||
template: _.template($('#graph-template').html()),
|
template: _.template($('#AMChart-template').html()),
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.modes = ['','lux','temp','co2','humid','noise'];
|
this.modes = ['','lux','temp','co2','humid','noise'];
|
||||||
this.mode = 0;
|
this.mode = 0;
|
||||||
this.xmlns = 'http://www.w3.org/2000/svg';
|
|
||||||
|
// Config AMChart
|
||||||
|
this.chart = new AmCharts.AmStockChart();
|
||||||
|
this.categoryAxesSettings = new AmCharts.CategoryAxesSettings();
|
||||||
|
this.dataSet = new AmCharts.DataSet();
|
||||||
|
|
||||||
console.log('GraphView!');
|
console.log('GraphView!');
|
||||||
_.bindAll(this, 'render', 'changeMode', 'updateGraph');
|
_.bindAll(this, 'render', 'changeMode', 'updateGraph','setupChart');
|
||||||
this.collection.on('update',function(d) {
|
this.collection.on('update',function(d) {
|
||||||
if (this.mode > 0) {
|
if (this.mode > 0) {
|
||||||
this.updateGraph();
|
this.updateGraph();
|
||||||
@ -234,19 +238,29 @@
|
|||||||
}, this);
|
}, this);
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
// This.setupChart();
|
||||||
},
|
},
|
||||||
events: {
|
events: {
|
||||||
'change select#displaymode': 'changeMode'
|
'change select#displaymode': 'changeMode'
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
$(this.el).html(this.template());
|
$(this.el).html(this.template());
|
||||||
this.$line = $(this.el).find('#line');
|
|
||||||
this.$maxY = $(this.el).find('#maxY');
|
|
||||||
this.$datapoints = $(this.el).find('#datapoints');
|
|
||||||
this.$baseline = $(this.el).find('#baseline');
|
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
setupChart: function() {
|
||||||
|
console.log('chart:SetupChart');
|
||||||
|
|
||||||
|
this.categoryAxesSettings.minPeriod = 'mm';
|
||||||
|
this.chart.categoryAxesSettings = this.categoryAxesSettings;
|
||||||
|
|
||||||
|
this.dataSet.color = '#b0de09';
|
||||||
|
|
||||||
|
this.chart.dataSets = [this.dataSet];
|
||||||
|
// This.chart.write('chartdiv');
|
||||||
|
},
|
||||||
|
|
||||||
changeMode: function() {
|
changeMode: function() {
|
||||||
this.mode = this.$el.find('#displaymode')[0].value;
|
this.mode = this.$el.find('#displaymode')[0].value;
|
||||||
this.updateGraph();
|
this.updateGraph();
|
||||||
@ -266,123 +280,58 @@
|
|||||||
let getMode = this.modes[this.mode];
|
let getMode = this.modes[this.mode];
|
||||||
var occupied;
|
var occupied;
|
||||||
|
|
||||||
_(this.collection.models).each(function(i) {
|
var chartData = [];
|
||||||
// Console.log(i);
|
|
||||||
points.push(i.get(getMode));
|
|
||||||
data.push(i.get('dt') + ' / ' + i.get(getMode));
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
ceiling = points.reduce(function(p, v) {
|
_(this.collection.models).each(function(i) {
|
||||||
return (Math.abs(p) > Math.abs(v) ? Math.abs(p) : Math.abs(v));
|
chartData.push({
|
||||||
|
date: i.get('dt'),
|
||||||
|
value: i.get(getMode)
|
||||||
});
|
});
|
||||||
|
|
||||||
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 10) * 10);
|
}, this);
|
||||||
if (ceilingLimit > 1000) {
|
|
||||||
ceilingLimit = (Math.ceil((Math.round(ceiling) + 1) / 50) * 50);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$datapoints.empty();
|
console.log(chartData);
|
||||||
this.$baseline.empty();
|
|
||||||
|
|
||||||
scale = 124 / ceilingLimit;
|
this.dataSet.fieldMappings = [{
|
||||||
xstep = 234 / points.length;
|
fromField: 'value',
|
||||||
console.log('Points length:', points.length);
|
toField: 'value'
|
||||||
console.log(xstep);
|
}];
|
||||||
//Xstep = 2.34;
|
|
||||||
startX = 46 ;
|
|
||||||
if (points.length < 100) {
|
|
||||||
startX = 46 + (100 - points.length) * xstep;
|
|
||||||
}
|
|
||||||
calcArray = [];
|
|
||||||
|
|
||||||
for (var x = 0;x < points.length;x++) {
|
this.dataSet.dataProvider = chartData;
|
||||||
calcArray.push((startX + (x * xstep)).toFixed(2) + ',' + (136 - ((points[x]) * scale)).toFixed(2));
|
this.chart.dataSets = [this.dataSet];
|
||||||
|
|
||||||
title = document.createElementNS(this.xmlns,'title');
|
|
||||||
|
|
||||||
if (parseInt(this.mode) === 5) {
|
|
||||||
occupied = (points[x] > 920) ? 'purple' : 'red';
|
|
||||||
} else if (parseInt(this.mode) === 3) {
|
|
||||||
occupied = (points[x] > 579) ? 'purple' : 'red';
|
|
||||||
} else {
|
|
||||||
occupied = 'red';
|
|
||||||
}
|
|
||||||
if (occupied !== 'red') {
|
|
||||||
circle = document.createElementNS(this.xmlns,'circle');
|
|
||||||
circle.setAttributeNS(null,'fill',occupied);
|
|
||||||
circle.setAttributeNS(null,'cx',(startX + (x * xstep)).toFixed(2).toString());
|
|
||||||
circle.setAttributeNS(null,'cy',(136 - ((points[x]) * scale)).toFixed(2).toString());
|
|
||||||
circle.setAttributeNS(null,'r','2');
|
|
||||||
circle.setAttributeNS(null,'stroke-width','1');
|
|
||||||
|
|
||||||
title.textContent = data[x];
|
|
||||||
|
|
||||||
circle.appendChild(title);
|
|
||||||
|
|
||||||
this.$datapoints[0].appendChild(circle);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('This.mode = ', this.mode);
|
|
||||||
if (parseInt(this.mode) === 3 || parseInt(this.mode) === 5) {
|
|
||||||
var avgLine = (parseInt(this.mode) === 3) ? 526 : 852;
|
|
||||||
|
|
||||||
var bline = document.createElementNS(this.xmlns,'line');
|
|
||||||
bline.setAttributeNS(null,'x1',46);
|
|
||||||
bline.setAttributeNS(null,'y1',(136 - (avgLine * scale)).toFixed(2).toString());
|
|
||||||
bline.setAttributeNS(null,'x2',280);
|
|
||||||
bline.setAttributeNS(null,'y2',(136 - (avgLine * scale)).toFixed(2).toString());
|
|
||||||
|
|
||||||
bline.setAttributeNS(null,'stroke','#00ff00');
|
|
||||||
bline.setAttributeNS(null,'stroke-width','1');
|
|
||||||
|
|
||||||
this.$baseline[0].appendChild(bline);
|
|
||||||
|
|
||||||
|
|
||||||
|
var stockPanel1 = new AmCharts.StockPanel();
|
||||||
|
stockPanel1.showCategoryAxis = false;
|
||||||
|
stockPanel1.title = 'Value';
|
||||||
|
stockPanel1.percentHeight = 70;
|
||||||
|
|
||||||
bline = document.createElementNS(this.xmlns,'line');
|
// Graph of first stock panel
|
||||||
bline.setAttributeNS(null,'x1',46);
|
var graph1 = new AmCharts.StockGraph();
|
||||||
bline.setAttributeNS(null,'y1',(136 - (4884 * scale)).toFixed(2).toString());
|
graph1.valueField = 'value';
|
||||||
bline.setAttributeNS(null,'x2',280);
|
graph1.type = 'smoothedLine';
|
||||||
bline.setAttributeNS(null,'y2',(136 - (4884 * scale)).toFixed(2).toString());
|
graph1.lineThickness = 2;
|
||||||
|
graph1.bullet = 'round';
|
||||||
|
graph1.bulletBorderColor = '#FFFFFF';
|
||||||
|
graph1.bulletBorderAlpha = 1;
|
||||||
|
graph1.bulletBorderThickness = 3;
|
||||||
|
stockPanel1.addStockGraph(graph1);
|
||||||
|
|
||||||
bline.setAttributeNS(null,'stroke','#00ff55');
|
// Create stock legend
|
||||||
bline.setAttributeNS(null,'stroke-width','1');
|
var stockLegend1 = new AmCharts.StockLegend();
|
||||||
this.$baseline[0].appendChild(bline);
|
stockLegend1.valueTextRegular = ' ';
|
||||||
}
|
stockLegend1.markerType = 'none';
|
||||||
|
stockPanel1.stockLegend = stockLegend1;
|
||||||
|
|
||||||
if (parseInt(this.mode) === 3) {
|
this.chart.panels = [stockPanel1];
|
||||||
var bline = document.createElementNS(this.xmlns,'line');
|
|
||||||
bline.setAttributeNS(null,'x1',46);
|
|
||||||
bline.setAttributeNS(null,'y1',(136 - (632 * scale)).toFixed(2).toString());
|
|
||||||
bline.setAttributeNS(null,'x2',280);
|
|
||||||
bline.setAttributeNS(null,'y2',(136 - (632 * scale)).toFixed(2).toString());
|
|
||||||
|
|
||||||
bline.setAttributeNS(null,'stroke','yellow');
|
|
||||||
bline.setAttributeNS(null,'stroke-width','1');
|
|
||||||
|
|
||||||
this.$baseline[0].appendChild(bline);
|
|
||||||
|
|
||||||
var bline = document.createElementNS(this.xmlns,'line');
|
|
||||||
bline.setAttributeNS(null,'x1',46);
|
|
||||||
bline.setAttributeNS(null,'y1',(136 - (1045 * scale)).toFixed(2).toString());
|
|
||||||
bline.setAttributeNS(null,'x2',280);
|
|
||||||
bline.setAttributeNS(null,'y2',(136 - (1045 * scale)).toFixed(2).toString());
|
|
||||||
|
|
||||||
bline.setAttributeNS(null,'stroke','red');
|
|
||||||
bline.setAttributeNS(null,'stroke-width','1');
|
|
||||||
|
|
||||||
this.$baseline[0].appendChild(bline);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
this.$line[0].setAttribute('points',calcArray.join(' '));
|
var panelsSettings = new AmCharts.PanelsSettings();
|
||||||
|
panelsSettings.mouseWheelZoomEnabled = true;
|
||||||
this.$maxY[0].textContent = ceilingLimit;
|
panelsSettings.usePrefixes = true;
|
||||||
|
this.chart.panelsSettings = panelsSettings;
|
||||||
|
|
||||||
|
this.chart.write('chartdiv');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -113,6 +113,38 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script type="text/template" id="AMChart-template">
|
<script type="text/template" id="AMChart-template">
|
||||||
|
<div class="mui-container">
|
||||||
|
<div class="mui-row">
|
||||||
|
<div class="mui-select mui-col-md-6">
|
||||||
|
<select id="displaymode" name="displaymode">
|
||||||
|
<option value="0"></option>
|
||||||
|
<option value="1">
|
||||||
|
Light
|
||||||
|
</option>
|
||||||
|
|
||||||
|
<option value="2">
|
||||||
|
Temp
|
||||||
|
</option>
|
||||||
|
<option value="3">
|
||||||
|
Co2
|
||||||
|
</option>
|
||||||
|
|
||||||
|
<option value="4">
|
||||||
|
Humidity
|
||||||
|
</option>
|
||||||
|
<option value="5">
|
||||||
|
Noise
|
||||||
|
</option>
|
||||||
|
|
||||||
|
</select> <label>Graph</label>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mui-container">
|
||||||
|
<div id="chartdiv" style="width:100%; height:600px;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user