I used Arduino to send sensor data to a Raspberry pi, (such as temperature, humidity, smoke level, etc.) Raspberry pi stored them and committed to MySQL database. I am now displaying the dataset on a web server using Flask.
In my python code, I have access to the database.
def getTemps():
cursor = dbConn.cursor()
result = cursor.execute(sql)
if result > 0:
tempDetails = curcor.fetchall()
return render_template("temp.html", tempDetails=tempDetails)
Now, I am able to display them in a table on html like below
{% for data in tempDetails %}
<tr>
<td>{{ data[0] }}</td>
<td>{{ data[1] }}</td>
<td>{{ data[2] }}</td>
<td>{{ data[3] }}</td>
</tr>
{% endfor %}
p.s: data[0] is id, data[1] is temperature, data[2] is humidity, data[3] is timestamp.
However, I wanted to put them in a graph too, I tried to use Chart.js
, but I am not sure how to put my list of temperature (and or humidity) in the dataset.
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: [/* I want to display each timestamp*/],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [/* in here should i use the {% for data in tempDetails %} for loop again?*/]
}]
},
// Configuration options go here
options: {}
});
Any help would be appreciated!!! Cheers!