You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.2 KiB
80 lines
2.2 KiB
{% extends "base.html" %}
|
|
|
|
|
|
{% block content %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<p>{{ plant.name }}</p>
|
|
<p>{{ plant.bought }}</p>
|
|
<br>
|
|
|
|
<h5>Temperature and Moisture Graph</h5>
|
|
<canvas id="temperatureMoistureChart" width="400" height="200"></canvas>
|
|
|
|
|
|
|
|
<!-- JavaScript code to render the temperature graph -->
|
|
|
|
<script>
|
|
let ctx = document.getElementById('temperatureMoistureChart').getContext('2d');
|
|
|
|
let temperatureData = [
|
|
{% for temp in temps %}
|
|
{{ temp.temp }},
|
|
{% endfor %}
|
|
];
|
|
|
|
let moistureData = [
|
|
{% for moist in moists %}
|
|
{{ moist.moisture }},
|
|
{% endfor %}
|
|
];
|
|
|
|
let dateTimes = [
|
|
{% for temp in temps %}
|
|
"{{ temp.dateTime|date:"d.m.y h:i" }}",
|
|
{% endfor %}
|
|
];
|
|
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: dateTimes,
|
|
datasets: [
|
|
{
|
|
label: 'Temperature',
|
|
data: temperatureData,
|
|
borderColor: 'rgb(34, 36, 36)',
|
|
tension: 0.1,
|
|
yAxisID: 'temperature-y-axis'
|
|
},
|
|
{
|
|
label: 'Moisture',
|
|
data: moistureData,
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
tension: 0.1,
|
|
yAxisID: 'moisture-y-axis'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: [
|
|
{
|
|
id: 'temperature-y-axis',
|
|
type: 'linear',
|
|
position: 'left',
|
|
beginAtZero: true
|
|
},
|
|
{
|
|
id: 'moisture-y-axis',
|
|
type: 'linear',
|
|
position: 'right',
|
|
beginAtZero: true
|
|
}
|
|
]
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %} |