From 336ac17d74ed5b34b4a2c1f8a773dbb99dacaa72 Mon Sep 17 00:00:00 2001 From: gregor herrmann Date: Thu, 14 Jun 2018 23:24:58 +0200 Subject: [PATCH] aesthetic sugar: set width of charts to 80% of parent --- web/static/seepark_web.css | 5 ++++- web/static/seepark_web.js | 13 ++++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/web/static/seepark_web.css b/web/static/seepark_web.css index 70d7692..9113003 100644 --- a/web/static/seepark_web.css +++ b/web/static/seepark_web.css @@ -14,9 +14,12 @@ fill: red; } -#openweathermap-widget-15 { +#openweathermap-widget-15, .c3 { margin: 0 auto; text-align: center; padding-top: 1em; +} + +#openweathermap-widget-15 { width: 300px; } diff --git a/web/static/seepark_web.js b/web/static/seepark_web.js index 87e897a..399fd86 100644 --- a/web/static/seepark_web.js +++ b/web/static/seepark_web.js @@ -2,7 +2,10 @@ var api_base_url = '/api/1/sensor/type/Wassertemperatur?mode=consolidated&format function dayschart(element, interval, days) { var chart = c3.generate({ - bindto: element, + bindto: '#' + element, + size: { + width: document.getElementById(element).parentElement.clientWidth * 80 / 100 + }, transition: { duration: null }, @@ -103,7 +106,7 @@ function beginend(days) { return '&begin=' + begin + '&end=' + end; } -dayschart('#chart1', 'Tag', 1); -dayschart('#chart7', 'Woche', 7); -dayschart('#chart31', 'Monat', 31); -dayschart('#chart365', 'Jahr', 365); +dayschart('chart1', 'Tag', 1); +dayschart('chart7', 'Woche', 7); +dayschart('chart31', 'Monat', 31); +dayschart('chart365', 'Jahr', 365); -- 2.47.3