Relintai/rcpp_sample_simple_data_collector_app
1
0
Fork 0
mirror of https://github.com/Relintai/rcpp_sample_simple_data_collector_app.git synced 2025-04-18 14:06:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implemented a chart.

Browse Source
This commit is contained in:
Relintai 2021-05-01 22:40:51 +02:00
parent d91f9d2b88
commit 5068e3059b
5 changed files with 98 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
content/www/css/main.css
View File

@ -1,7 +1,7 @@
body {
padding: 0;
margin: 0;
background-color: rgb(191, 191, 191);
background-color: rgb(255, 255, 255);
}
a:visited {
@ -121,4 +121,10 @@ ul.pagination li.disabled {
ul.pagination li a:hover {
background-color: rgb(60, 60, 60);
color: white;
}
.chart {
margin-left: auto;
margin-right: auto;
width: 800px;
}

17
content/www/index.html
View File

@ -1,5 +1,22 @@
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<p>Welcome</p>
<div class="chart">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</body>
<script src="js/chart.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/site.js"></script>
</html>

13
content/www/js/chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
content/www/js/jquery.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

59
content/www/js/site.js Normal file
View File

@ -0,0 +1,59 @@
$(document).ready(function() {
init_chart();
$.getJSON("sensor_data").done(refresh_chart);
});
var myChart;
function init_chart() {
var ctx = document.getElementById('myChart').getContext('2d');
const data = {
labels: [],
datasets: [{
label: 'Temperatures',
data: [],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
const config = {
type: 'line',
data: data,
};
myChart = new Chart(ctx, config);
}
function refresh_chart(rec_data) {
var labels = []
var d = []
var i;
for (i = 0; i < rec_data.length; i++) {
labels.push(rec_data[i].id);
d.push(rec_data[i].measurement);
}
setData(myChart, labels, d);
setTimeout(queue_update, 5000);
}
function setData(chart, labels, data) {
chart.data.labels = labels;
chart.data.datasets.forEach((dataset) => {
dataset.data = data;
});
chart.update();
}
function queue_update() {
$.getJSON("sensor_data").done(refresh_chart);
}