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 70d7692e4482235e95f9cb66b51cddd054f10106..91130034dd6b5839959a6b3198a16f4f6201961c 100644 (file)
--- a/web/static/seepark_web.css
+++ b/web/static/seepark_web.css
@@ -14,9 +14,12 @@
     fill: red;
 }
 
     fill: red;
 }
 

-#openweathermap-widget-15 {
+#openweathermap-widget-15, .c3 {

     margin: 0 auto;
     text-align: center;
     padding-top: 1em;
     margin: 0 auto;
     text-align: center;
     padding-top: 1em;

+}
+
+#openweathermap-widget-15 {

     width: 300px;
 }
     width: 300px;
 }

diff --git a/web/static/seepark_web.js b/web/static/seepark_web.js
index 87e897a33c828485881944e241aa171b5c52eb3f..399fd86445cb39e5bac5abc4eb439647d5713bc3 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({
 
 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
                },
                transition: {
                        duration: null
                },


@@ -103,7 +106,7 @@ function beginend(days) {
        return '&begin=' + begin + '&end=' + end;
 }
 
        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);