aesthetic sugar: set width of charts to 80% of parent

diff --git a/web/static/seepark_web.css b/web/static/seepark_web.css
index 70d7692..9113003 100644 (file)
--- 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 (file)
--- 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);