web/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   var y_label = properties["names"][sensor_path];
  43   if (properties["units"][sensor_path]) {
  44     y_label = y_label + ", " + properties["units"][sensor_path];
  45   }
  46
  47   var cfg = {
  48     type: 'bar',
  49     data: {
  50       datasets: [
  51         {
  52           label: properties["places"][sensor_path] + ' - ' + properties["names"][sensor_path],
  53           backgroundColor: color(properties["colors"][sensor_path]).alpha(0.5).rgbString(),
  54           borderColor: properties["colors"][sensor_path],
  55           data: processDataset(graphData,sensor_id,sensor,param),
  56           type: 'line',
  57           pointRadius: 0,
  58           fill: true,
  59           borderWidth: 2
  60         }
  61       ]
  62     },
  63     options: {
  64       animation: {
  65         duration: 0,
  66       },
  67       hover: {
  68        animationDuration: 0,
  69       },
  70       responsiveAnimationDuration: 0,
  71       legend: {
  72         labels: {
  73           fontColor: properties["fonts"]["legend"]["color"],
  74           fontSize: properties["fonts"]["legend"]["size"],
  75           fontStyle: properties["fonts"]["legend"]["style"],
  76         }
  77       },
  78       scales: {
  79         xAxes: [{
  80           type: 'time',
  81           distribution: 'series',
  82           scaleLabel: {
  83             fontColor: properties["fonts"]["axes"]["color"],
  84             fontSize: properties["fonts"]["axes"]["size"],
  85             fontStyle: properties["fonts"]["axes"]["style"],
  86           }
  87         }],
  88         yAxes: [{
  89           scaleLabel: {
  90             display: true,
  91             labelString: y_label,
  92             fontColor: properties["fonts"]["axes"]["color"],
  93             fontSize: properties["fonts"]["axes"]["size"],
  94             fontStyle: properties["fonts"]["axes"]["style"],
  95           }
  96         }]
  97       }
  98     }
  99   }
 100   var chart = new Chart(ctx, cfg);
 101 }
 102
 103 function RefreshGraph() {
 104
 105   var req = new XMLHttpRequest();
 106
 107   req.onreadystatechange = function () {
 108     if (this.readyState != 4) return;
 109     if (this.status != 200) {
 110       setTimeout(RefreshGraph,60000);
 111       return;
 112     }
 113     var graphData = JSON.parse(this.responseText);
 114     drawGraph(graphData);
 115     setTimeout(RefreshGraph,60000)
 116   };
 117
 118   req.open("GET", urlbase+"get/"+sensor_id+"/"+sensor+"/"+param, true);
 119   req.withCredentials = true;
 120   req.send();
 121
 122 }
 123
 124 function GetProperties() {
 125   var req = new XMLHttpRequest();
 126
 127   req.onreadystatechange = function () {
 128     if (this.readyState != 4) return;
 129     if (this.status != 200) {
 130       setTimeout(GetProperties,30000);
 131       return;
 132     }
 133     properties = JSON.parse(this.responseText);
 134     setTimeout(RefreshGraph,100)
 135   };
 136
 137   req.open("GET", urlbase+"props", true);
 138   req.withCredentials = true;
 139   req.send();
 140
 141 }
 142
 143 setTimeout(GetProperties,100)