web/static/seepark_web.js

   1 var api_base_url = '/api/1/sensor/type/Wassertemperatur?mode=consolidated&format=c3';
   2
   3 function dayschart(element, interval, days) {
   4         var chart = c3.generate({
   5                 bindto: element,
   6                 transition: {
   7                         duration: null
   8                 },
   9                 title: {
  10                         text: 'Der See (' + interval + ')'
  11                 },
  12                 data: {
  13                         url: api_base_url + beginend(days),
  14                         mimeType: 'json',
  15                         xs: {
  16                                 '0316a2193bff': '0316a2193bff_x',
  17                                 '0316a21383ff': '0316a21383ff_x'
  18                         },
  19                         names: {
  20                                 '0316a2193bff': 'Wassertemperatur in 4 m Tiefe',
  21                                 '0316a21383ff': 'Wassertemperatur in 5 m Tiefe'
  22                         },
  23                         xFormat: '%Y-%m-%d %H:%M:%S',
  24                         colors: {
  25                                 '0316a2193bff': 'lightblue',
  26                                 '0316a21383ff': 'darkblue'
  27                         }
  28                 },
  29                 axis: {
  30                         x: {
  31                                 type: 'timeseries',
  32                                 tick: {
  33                                         format: '%Y-%m-%d %H:%M',
  34                                         fit: false,
  35                                         multiline: true, // broken? so →
  36                                         rotate: -90
  37                                 }
  38                         },
  39                         y: {
  40                                 label: {
  41                                         text: 'Temperatur in °C',
  42                                         position: 'outer-middle'
  43                                 },
  44                                 tick: {
  45                                         format: function (d) {
  46                                                 return d.toFixed(1) + '°';
  47                                         }
  48                                 }
  49                         }
  50                 },
  51                 zoom: {
  52                         enabled: true,
  53                         onzoomend: function (domain) {
  54                                 // UNIX epoch
  55                                 var start = domain[0].getTime()/1000;
  56                                 var end   = domain[1].getTime()/1000;
  57                                 var duration = end - start;
  58                                 // duration is now the diff of the "viewport in seconds"
  59                                 // FIXME
  60                                 var days = Math.round(duration / 86400 / 2);
  61                                 if (days > 0) {
  62                                         loaddays(days);
  63                                 }
  64                         }
  65                 },
  66                 tooltip: {
  67                         format: {
  68                                 name: function (name, ratio, id, index) {
  69                                         var re = /\d m/;
  70                                         var res = re.exec(name);
  71                                         return res;
  72                                 },
  73                                 value: function (value, ratio, id, index) {
  74                                         return value.toFixed(2) + '°';
  75                                 }
  76                         }
  77                 },
  78                 grid: {
  79                         y: {
  80                                 show: true
  81                         }
  82                 },
  83                 regions: [
  84                         {axis: 'y', start: -999, end:   0, class: 'region-frozen'},
  85                         {axis: 'y', start:    0, end:  25, class: 'region-ok'},
  86                         {axis: 'y', start:   25, end: 100, class: 'region-warm'},
  87                         {axis: 'y', start:  100, end: 999, class: 'region-boiling'}
  88                 ]
  89         });
  90         };
  91
  92 function loaddays(days) {
  93         chart.load({
  94                 url: api_base_url + beginend(days),
  95                 mimeType: 'json'
  96         });
  97 }
  98
  99 function beginend(days) {
 100         var now = Date.now();
 101         var end = new Date(now).toISOString().substr(0, 19); // 2018-06-13T16:52:30.995Z
 102         var begin = new Date(now - days * 60*60*24 * 1000).toISOString().substr(0, 19);
 103         return '&begin=' + begin + '&end=' + end;
 104 }
 105
 106 dayschart('#chart1',   'Tag',     1);
 107 dayschart('#chart7',   'Woche',   7);
 108 dayschart('#chart31',  'Monat',  31);
 109 dayschart('#chart365', 'Jahr',  365);