Skip to content
Snippets Groups Projects
Commit 047c1b1f authored by adam-abed-abud's avatar adam-abed-abud
Browse files

Adding chart section

parent 1446db76
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
raspberry-backend/database/HEC_monitoringDB.sqlite
+ 0
− 0
View file @ 047c1b1f
No preview for this file type
raspberry-backend/database/HEC_monitoringDB_backup.sqlite
+ 0
− 0
View file @ 047c1b1f
No preview for this file type
raspberry-backend/static/js/Chart-display.js 0 → 100644
+ 193
− 0
View file @ 047c1b1f
var chart_pressure;
var chart_flow;
var chart_volume;
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestChartVar1(var1) {
$.ajax({
url: '/live-data',
success: function(point) {
if(chart_pressure.data.datasets[0].data.length > 10){
chart_pressure.data.labels.shift();
chart_pressure.data.datasets[0].data.shift();
}
// add the point
chart_pressure.data.labels.push(point.created_at);
chart_pressure.data.datasets[0].data.push(point[var1]);
chart_pressure.update();
},
cache: false
});
// call it again after one second
setTimeout(requestChartVar1, 1000, var1);
}
$(document).ready(function() {
var ctx_pressure = document.getElementById('pressure_chart');
chart_pressure = new Chart(ctx_pressure, {
type: 'line',
data: {
labels: [],
datasets: [{
data: [],
label: "Var1",
borderColor: "#3e95cd",
fill: false
}
]
},
options: {
title: {
display: false,
text: 'Variable 1'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormat: 'second'
}
}]
},
legend : {
display: false}
}
});
requestChartVar1("pressure_buffer");
});
function requestChartVar2(var1) {
$.ajax({
url: '/live-data',
success: function(point) {
if(chart_flow.data.datasets[0].data.length > 10){
chart_flow.data.labels.shift();
chart_flow.data.datasets[0].data.shift();
}
// add the point
chart_flow.data.labels.push(point.created_at);
chart_flow.data.datasets[0].data.push(point[var1]);
chart_flow.update();
},
cache: false
});
// call it again after one second
setTimeout(requestChartVar2, 1000, var1);
}
$(document).ready(function() {
var ctx_flow = document.getElementById('flow_chart');
chart_flow = new Chart(ctx_flow, {
type: 'line',
data: {
labels: [],
datasets: [{
data: [],
label: "Var1",
borderColor: "#3e95cd",
fill: false
}
]
},
options: {
title: {
display: false,
text: 'Variable 1'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormat: 'second'
}
}]
},
legend : {
display: false}
}
});
requestChartVar2("pressure_inhale");
});
function requestChartVar3(var1) {
$.ajax({
url: '/live-data',
success: function(point) {
if(chart_volume.data.datasets[0].data.length > 10){
chart_volume.data.labels.shift();
chart_volume.data.datasets[0].data.shift();
}
// add the point
chart_volume.data.labels.push(point.created_at);
chart_volume.data.datasets[0].data.push(point[var1]);
chart_volume.update();
},
cache: false
});
// call it again after one second
setTimeout(requestChartVar3, 1000, var1);
}
$(document).ready(function() {
var ctx_volume = document.getElementById('volume_chart');
chart_volume = new Chart(ctx_volume, {
type: 'line',
data: {
labels: [],
datasets: [{
data: [],
label: "Var1",
borderColor: "#3e95cd",
fill: false
}
]
},
options: {
title: {
display: false,
text: 'Variable 1'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'second',
displayFormat: 'second'
}
}]
},
legend : {
display: false}
}
});
requestChartVar3("temperature_buffer");
});
raspberry-backend/templates/base.html
+ 1
− 0
View file @ 047c1b1f
......@@ -73,6 +73,7 @@
<script src="{{ url_for('static', filename='js/moment.js') }}"></script>
<script src="{{ url_for('static', filename='js/Chart.js') }}"></script>
<script src="{{ url_for('static', filename='js/Chart-plot.js') }}"></script>
<script src="{{ url_for('static', filename='js/Chart-display.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/dataTables.bootstrap4.min.js') }}"></script>
......
raspberry-backend/templates/charts.html
+ 9
− 61
View file @ 047c1b1f
......@@ -11,28 +11,28 @@
<div class = "row">
<div class = "col-md-7 py-0">
<div class = "col-md-10 py-0">
<div class="row">
<div class="col-md-12">
<div class="card mb-6">
<div class="card-chart-header small ">Variable number 1</div>
<div class="card-body px-0 py-0"><canvas id="pressure_air_supply" width="200%" height="40"></canvas></div>
<div class="card-chart-header small ">Pressure [mbar]</div>
<div class="card-body px-0 py-0"><canvas id="pressure_chart" width="200%" height="30"></canvas></div>
</div>
</div>
</div>
<div class = "row">
<div class="col-md-12">
<div class="card mb-6 px-0 py-0">
<div class="card-chart-header small">Variable number 2</div>
<div class="card-body px-0 py-0"><canvas id="variable2" width="200%" height="40"></canvas></div>
<div class="card-chart-header small">Flow [mL/min]</div>
<div class="card-body px-0 py-0"><canvas id="flow_chart" width="200%" height="30"></canvas></div>
</div>
</div>
</div>
<div class = "row">
<div class="col-md-12">
<div class="card mb-6 px-0 py-0">
<div class="card-chart-header small ">Variable number 3</div>
<div class="card-body px-0 py-0"><canvas id="chart_variable3" width="200%" height="40"></canvas></div>
<div class="card-chart-header small ">Volume [mL]</div>
<div class="card-body px-0 py-0"><canvas id="volume_chart" width="200%" height="30"></canvas></div>
</div>
</div>
</div>
......@@ -40,61 +40,9 @@
<div class = "col-md-5 py-0 px-0 mr-0">
<div class="row">
<div class="col-xl-5b px-1 py-0 mr-0">
<div class="card bg-primary text-dark mb-2">
<div class="card-header d-flex align-items-center justify-content-between">
<a class="small text-dark stretched-link" href="#">Temperature</a>
</div>
<div class="card-body"><span class = "reading" id="temperature">000.00</span> &#8451;</div>
</div>
</div>
<div class="col-xl-5b px-1 py-0 mr-0">
<div class="card bg-primary text-dark mb-2">
<div class="card-header d-flex align-items-center justify-content-between">
<a class="small text-dark stretched-link" href="#">Pressure</a>
</div>
<div class="card-body"><span class = "reading" id = "pressure">000.00</span> Pa</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-5b col-md-8 px-1 py-0">
<div class="card bg-primary text-dark mb-2">
<div class="card-header d-flex align-items-center justify-content-between">
<a class="small text-dark stretched-link" href="#">variable3</a>
</div>
<div class="card-body"><span class = "reading" id = "variable3">000.00</span> &#8451;</div>
</div>
</div>
<div class="col-xl-5b px-1 py-0 col-md-8">
<div class="card bg-primary text-dark mb-2">
<div class="card-header d-flex align-items-center justify-content-between">
<a class="small text-dark stretched-link" href="#">variable4</a>
</div>
<div class="card-body"><span class = "reading" id = "variable4">000.00</span> Pa</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-5b col-md-8 px-1 py-0">
<div class="card bg-primary text-dark mb-2">
<div class="card-header d-flex align-items-center justify-content-between">
<a class="small text-dark stretched-link" href="#">variable5</a>
</div>
<div class="card-body"><span class = "reading" id = "variable5">000.00</span> &#8451;</div>
</div>
</div>
<div class="col-xl-5b px-1 py-0 col-md-8">
<div class="card bg-primary text-dark mb-2">
<div class="card-header d-flex align-items-center justify-content-between">
<a class="small text-dark stretched-link" href="#">variable6</a>
</div>
<div class="card-body"><span class = "reading" id = "variable6">000.00</span> Pa</div>
</div>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment