openwrt-web/meteo/graph.js

   1 urlbase="/meteo/cgi?"
   2 archive_base="/meteo/archive";
   3
   4 var params = window.location.pathname.split('/').slice(-4);
   5 var sensor_id = params[1];
   6 var sensor = params[2];
   7 var param = params[3];
   8
   9 var sensor_path = sensor_id + "." + sensor + "." + param;
  10
  11 var properties;
  12
  13 function processDataset(dataset,sensorid,sensorname,paramname) {
  14   var scale = properties["scale"][sensorid+"."+sensorname+"."+paramname]
  15   if (scale) {
  16     var result=[];
  17     for (idx in dataset) {
  18       newRec = {};
  19       newRec.t = dataset[idx].t
  20       newRec.y = dataset[idx].y * scale[0];
  21       result.push(newRec);
  22     }
  23     return result;
  24   } else {
  25     return dataset;
  26   }
  27 }
  28
  29 function drawGraph(graphData) {
  30
  31   document.getElementById("archive").href = archive_base+"////"+sensor_id + "/" + sensor + "/" + param;
  32
  33   var div = document.getElementById("chartdiv");
  34   var canvas = document.getElementById("chart");
  35
  36   canvas.width = div.style.width;
  37   canvas.height = div.style.height;
  38
  39   var ctx = canvas.getContext('2d');
  40   var color = Chart.helpers.color;
  41
  42   if (param=="*") {
  43
  44     var cfg = {
  45       type: 'bar',
  46       data: {
  47         datasets: [
  48         ]
  49       },
  50       options: {
  51         animation: {
  52           duration: 0,
  53         },
  54         hover: {
  55           animationDuration: 0,
  56         },
  57         responsiveAnimationDuration: 0,
  58         legend: {
  59           labels: {
  60             fontColor: properties["fonts"]["legend"]["color"],
  61             fontSize: properties["fonts"]["legend"]["size"],
  62             fontStyle: properties["fonts"]["legend"]["style"],
  63           }
  64         },
  65         scales: {
  66           xAxes: [{
  67             type: 'time',
  68             distribution: 'series',
  69             scaleLabel: {
  70               fontColor: properties["fonts"]["axes"]["color"],
  71               fontSize: properties["fonts"]["axes"]["size"],
  72               fontStyle: properties["fonts"]["axes"]["style"],
  73             }
  74           }],
  75           yAxes: [{
  76             scaleLabel: {
  77               display: true,
  78               fontColor: properties["fonts"]["axes"]["color"],
  79               fontSize: properties["fonts"]["axes"]["size"],
  80               fontStyle: properties["fonts"]["axes"]["style"],
  81             }
  82           }]
  83         }
  84       }
  85     }
  86
  87     for (paramname in graphData) {
  88
  89       cfg.data.datasets.push(
  90         {
  91           label: properties["names"][sensor_id+"."+sensor+"."+paramname],
  92           data: processDataset(graphData[paramname],sensor_id,sensor,paramname),
  93           borderColor: properties["colors"][sensor_id+"."+sensor+"."+paramname],
  94           type: 'line',
  95           fill: false,
  96           pointRadius: 0,
  97           borderWidth: 2
  98         }
  99       )
 100
 101     }
 102
 103   } else {
 104
 105     var y_label = properties["names"][sensor_path];
 106     if (properties["units"][sensor_path]) {
 107       y_label = y_label + ", " + properties["units"][sensor_path];
 108     }
 109
 110     var cfg = {
 111       type: 'bar',
 112       data: {
 113         datasets: [
 114           {
 115             label: properties["names"][sensor_path],
 116             backgroundColor: color(properties["colors"][sensor_path]).alpha(0.5).rgbString(),
 117             borderColor: properties["colors"][sensor_path],
 118             data: processDataset(graphData,sensor_id,sensor,param),
 119             type: 'line',
 120             pointRadius: 0,
 121             fill: true,
 122             borderWidth: 2
 123           }
 124         ]
 125       },
 126       options: {
 127         animation: {
 128           duration: 0,
 129         },
 130         hover: {
 131           animationDuration: 0,
 132         },
 133         responsiveAnimationDuration: 0,
 134         legend: {
 135           labels: {
 136             fontColor: properties["fonts"]["legend"]["color"],
 137             fontSize: properties["fonts"]["legend"]["size"],
 138             fontStyle: properties["fonts"]["legend"]["style"],
 139           }
 140         },
 141         scales: {
 142           xAxes: [{
 143             type: 'time',
 144             distribution: 'series',
 145             scaleLabel: {
 146               fontColor: properties["fonts"]["axes"]["color"],
 147               fontSize: properties["fonts"]["axes"]["size"],
 148               fontStyle: properties["fonts"]["axes"]["style"],
 149             }
 150           }],
 151           yAxes: [{
 152             scaleLabel: {
 153               display: true,
 154               labelString: y_label,
 155               fontColor: properties["fonts"]["axes"]["color"],
 156               fontSize: properties["fonts"]["axes"]["size"],
 157               fontStyle: properties["fonts"]["axes"]["style"],
 158             }
 159           }]
 160         }
 161       }
 162     }
 163
 164   }
 165   var chart = new Chart(ctx, cfg);
 166 }
 167
 168 function RefreshGraph() {
 169
 170   var req = new XMLHttpRequest();
 171
 172   req.onreadystatechange = function () {
 173     if (this.readyState != 4) return;
 174     if (this.status != 200) {
 175       setTimeout(RefreshGraph,30000);
 176       return;
 177     }
 178     var graphData = JSON.parse(this.responseText);
 179     drawGraph(graphData);
 180     setTimeout(RefreshGraph,30000)
 181   };
 182
 183   req.open("GET", urlbase+"get/"+sensor_id+"/"+sensor+"/"+param, true);
 184   req.send();
 185
 186 }
 187
 188 function GetProperties() {
 189   var req = new XMLHttpRequest();
 190
 191   req.onreadystatechange = function () {
 192     if (this.readyState != 4) return;
 193     if (this.status != 200) {
 194       setTimeout(GetProperties,30000);
 195       return;
 196     }
 197     properties = JSON.parse(this.responseText);
 198     setTimeout(RefreshGraph,100)
 199   };
 200
 201   req.open("GET", urlbase+"props", true);
 202   req.send();
 203
 204 }
 205
 206 setTimeout(GetProperties,100)