From 9c820098e8025c5619dc02208472ed533203ed91 Mon Sep 17 00:00:00 2001
From: Tor-Einar Skog <tor-einar.skog@nibio.no>
Date: Tue, 15 Aug 2023 11:04:25 +0200
Subject: [PATCH] Bugfix: Auto resizing chart when window/parent container
expands
---
ipmd/templates/ipmd/saddlegallmidgeform.html | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/ipmd/templates/ipmd/saddlegallmidgeform.html b/ipmd/templates/ipmd/saddlegallmidgeform.html
index 977d77ab..6692467e 100644
--- a/ipmd/templates/ipmd/saddlegallmidgeform.html
+++ b/ipmd/templates/ipmd/saddlegallmidgeform.html
@@ -32,8 +32,8 @@
<select class="form-control" name="weatherStationId" id="weatherStationId"></select>
</div>
<button class="btn btn-primary" type="button" onclick="submitData();">Submit</button>
- <div>
- <canvas id="resultChart"></canvas>
+ <div style="aspect-ratio: 2;">
+ <canvas id="resultChart""></canvas>
</div>
<div id="weatherData" class="table-responsive">
</div>
@@ -50,6 +50,7 @@
// Page globals
var modelMetaData = undefined;
var weatherDatasource = undefined;
+ var weatherDatasources = undefined;
var editor = undefined;
const selectList = document.getElementById("weatherStationId");
@@ -73,6 +74,8 @@
//console.info("Adding weather stations");
// Pull weather stations from web service, render list
weatherDatasource = await getWeatherDatasource("no.nibio.lmt");
+ weatherDatasources = await getWeatherDatasources();
+ console.info(weatherDatasources);
stationList = await getWeatherStationList(weatherDatasource);
stationList.sort((a, b) => {
return (a.name < b.name) ? -1 : (a.name > b.name) ? 1 : 0;
@@ -160,13 +163,14 @@
new Chart(ctx, {
type: "line",
options: {
+ responsive: true,
scales: {
x: {
type: "time",
time: {
//unit: "day",
diplayFormats: {
- day: "YYYY-MM-DD" // This doesn't seem to have any effect
+ day: "YYYY-MM-DD" // This doesn't seem to have any effect. Why??
}
}
}
--
GitLab