Menu
Community /Pin to ProfileBookmark
Chartjs from MariaDB
Greetings!
I have the following issue, I’ll try to describe it as precisely as possible while not overcomplicating things. My Arduino is currently measuring the Temperature and the Relative Humidity via a DHT-11 sensor, then forwards that data to my Raspberry Pi through bluetooth. A script on the Pi then reads the data and writes it into a MariaDB database. The layout is the following:
_TempPressure_SensorData_ID_temperature_humidity
The following code retrieves the last 20 measured data from the database:
[code]<?php
header(‘Content-Type: application/json’);
$conn = new mysqli(“”, “”, “”, “”);
$sqlQuery = “SELECT * FROM(SELECT * FROM SensorData order by ID desc limit 20) as tmpList order by ID asc”;
$result = mysqli_query($conn,$sqlQuery);
$data = array();
foreach ($result as $row) {
$data[] = $row;
}
mysqli_close($conn);
echo json_encode($data);
?>
This works fine as you can see on this picture:
![http://puu.sh/GACVj/29cc5e6c72.png
The front end would look like a line chart with the 2 measured results where x is the date and y is temperature and humidity both with a separate line. I’ve done most of my work with the help of chartjs.org on my own.
[code]<!DOCTYPE html>
<html>
<head>
<title>Temperature and Relative Humidity Sensor Data</title>
<style>
canvas{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
<script type=”text/javascript” src=”js/jquery.min.js”></script>
<script type=”text/javascript” src=”js/Chart.min.js”></script>
</head>
<body>
<div style=”width:75%”>
<canvas id=”graphCanvas”></canvas>
</div>
<script>
$(document).ready(function () {
showGraph();
});
function showGraph()
{
{
$.post(“temp_data.php”,
function (data)
{
console.log(data);
var date = [];
var temperature = [];
var humidity = [];
for (var i in data) {
date.push(data[i].date);
temperature.push(data[i].temperature);
humidity.push(data[i].humidity);
}
var graphTarget = $(“#graphCanvas”);
var lineGraph = new Chart(graphTarget, {
type: ‘line’,
data: {
labels: date,
datasets[{
label:’Temperature’,
backgroundColor: ‘#49e2ff’,
borderColor: ‘#46d5f1’,
hoverBackgroundColor: ‘#CCCCCC’,
hoverBorderColor: ‘#666666’,
data: temperature,
},
{
label:’Humidity’,
backgroundColor: ‘#49e2ee’,
borderColor: ‘#36f5f1’,
hoverBackgroundColor: ‘#CCCCCC’,
hoverBorderColor: ‘#333333’,
data: humidity,
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min:0,
max:45,
beginAtZero: true
}
}]
}
}
}
});
});
}
}
</script>
</body>
</html>
After a few days of trying I’ve decided to turn to some help. So here I am. If you need further clarification please do tell and I’ll provide the required information.
~Finger
Sign in
to post a comment