esp32-tempsensor/tempplot.js at main · spamatica/esp32-tempsensor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
d3.csv("https://spamatica.com/tempdata.csv", function(err, rows){

  function unpack(rows, key) {
  return rows.map(function(row) { return row[key]; });
}

var trace1 = {
  type: "scatter",
  mode: "lines",
  name: 'Temp Ute',
  x: unpack(rows, 'date'),
  y: unpack(rows, 'temp_ute'),
  line: {color: 'blue', width: 3}
}

var trace2 = {
  type: "scatter",
  mode: "lines",
  name: 'Temp Kok',
  x: unpack(rows, 'date'),
  y: unpack(rows, 'temp_kok'),
  line: {color: 'darkorange', width: 3}
}

var trace3 = {
  type: "scatter",
  mode: "lines",
  name: 'Temp Rum',
  x: unpack(rows, 'date'),
  y: unpack(rows, 'temp_rum'),
  line: { color: 'green', width: 3}
}

var data = [trace1,trace2, trace3];

const now = new Date(Date.now());
var numDays = 5;
const lastWeek = new Date(Date.now() - 1000 * 3600 * 24 * numDays);

console.log(now.toISOString());

console.log("WOWOWO");

var layout = {
  title: 'Vallen väder',
  width: 1300,
  height: 900,
  xaxis: {
    //autorange: true,
    range: [lastWeek, now],
    rangeselector: {
      buttons: [
        {
          count: 1,
          label: '1d',
          step: 'day',
          stepmode: 'backward'
        },
        {
          count: 7,
          label: '1w',
          step: 'day',
          stepmode: 'backward',
	  active: true
        },
        {
          count: 1,
          label: '1m',
          step: 'month',
          stepmode: 'backward'
        },
        {
		  step: 'all'
	}
      ]},
    // gives a slider
    //rangeslider: {range: ['2023-01-01', '2023-12-31']},
    type: 'date'
  },
  yaxis: {
    autorange: true,
    range: [-30.0, +30.0],
    type: 'linear'
  }
};

Plotly.newPlot('weathergraph', data, layout);
})