js: resize charts on window resize

[chrisu/seepark.git] / web / static / seepark_web.js

diff --git a/web/static/seepark_web.js b/web/static/seepark_web.js
index 48685e0cba51c3e87bfc9ea28193aa64a6c3b8d4..e4bd8d640646581708e418b28469bd256e81010c 100644 (file)
--- a/web/static/seepark_web.js
+++ b/web/static/seepark_web.js
@@ -17,9 +17,10 @@ function dayschart(element, title, days, xtickformat) {
                                        '0416a1ac66ff': 'Wassertemperatur 30cm Tiefe',
                                        '0516a207a4ff': 'Wassertemperatur 50cm Tiefe',
                                        '0416a1bab9ff': 'Wassertemperatur 1m Tiefe',
-                                       '0316a2193bff': 'Wassertemperatur in 4 m Tiefe'
+                                       '0316a2193bff': 'Wassertemperatur in 30 cm Tiefe'
                                },
                                xFormat: '%Y-%m-%d %H:%M:%S',
+                               // https://en.wikipedia.org/wiki/Web_colors
                                colors: {
                                        '0416a1ac66ff': 'lightskyblue',
                                        '0516a207a4ff': 'royalblue',
@@ -59,6 +60,12 @@ function dayschart(element, title, days, xtickformat) {
                size: {
                        width: document.getElementById(element).parentElement.clientWidth * 80 / 100
                },
+               onresized: function () {
+                       chart.resize({
+                               width: document.getElementById(element).parentElement.clientWidth * 80 / 100
+                       });
+                       // chart.flush();
+               },
                transition: {
                        duration: null
                },
@@ -93,6 +100,7 @@ function dayschart(element, title, days, xtickformat) {
                },
                zoom: {
                        enabled: true,
+                       /*
                        onzoomend: function (domain) {
                                // UNIX epoch
                                var start = domain[0].getTime()/1000;
@@ -105,6 +113,7 @@ function dayschart(element, title, days, xtickformat) {
                                        loaddays(this, element, days); // this = chart
                                }
                        }
+                       */
                },
                tooltip: {
                        format: {
@@ -178,10 +187,10 @@ function beginend(days) {
 
 dayschart('chart_water_1',   'Der See (Tag)',     1, '%H:%M');
 dayschart('chart_water_7',   'Der See (Woche)',   7, '%a %d');
-dayschart('chart_water_31',  'Der See (Monat)',  31, 'Woche %V');
+dayschart('chart_water_31',  'Der See (Monat)',  31, '%Y-%m-%d');
 dayschart('chart_water_365', 'Der See (Jahr)',  365, '%b %Y');
 
 dayschart('chart_air_1',     'Die Luft (Tag)',     1, '%H:%M');
 dayschart('chart_air_7',     'Die Luft (Woche)',   7, '%a %d');
-dayschart('chart_air_31',    'Die Luft (Monat)',  31, 'Woche %V');
+dayschart('chart_air_31',    'Die Luft (Monat)',  31, '%Y-%m-%d');
 dayschart('chart_air_365',   'Die Luft (Jahr)',  365, '%b %Y');