uPlot/demos/wind-direction.html at master · leeoniya/uPlot · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Wind Direction</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="../dist/uPlot.min.css">
</head>
<body>
	<script src="../dist/uPlot.iife.js"></script>
	<script>
		let data = [
			[1676415600,1676419200,1676422800,1676426400,1676430000,1676433600,1676437200,1676440800,1676444400,1676448000,1676451600,1676455200,1676458800,1676462400,1676466000,1676469600,1676473200,1676476800,1676480400,1676484000,1676487600,1676491200,1676494800,1676498400,1676502000,1676505600,1676509200,1676512800,1676516400,1676520000,1676523600,1676527200,1676530800,1676534400,1676538000,1676541600,1676545200,1676548800,1676552400,1676556000,1676559600,1676563200,1676566800,1676570400,1676574000,1676577600,1676581200,1676584800,1676588400,1676592000,1676595600,1676599200,1676602800,1676606400,1676610000,1676613600,1676617200,1676620800,1676624400,1676628000,1676631600,1676635200,1676638800,1676642400,1676646000,1676649600,1676653200,1676656800,1676660400,1676664000,1676667600,1676671200,1676674800,1676678400,1676682000,1676685600,1676689200,1676692800,1676696400,1676700000,1676703600,1676707200,1676710800,1676714400,1676718000,1676721600,1676725200,1676728800,1676732400,1676736000,1676739600,1676743200,1676746800,1676750400,1676754000,1676757600,1676761200,1676764800,1676768400,1676772000,1676775600,1676779200,1676782800,1676786400,1676790000,1676793600,1676797200,1676800800,1676804400,1676808000,1676811600,1676815200,1676818800,1676822400,1676826000,1676829600,1676833200,1676836800,1676840400,1676844000,1676847600,1676851200,1676854800,1676858400,1676862000,1676865600,1676869200,1676872800,1676876400,1676880000,1676883600,1676887200,1676890800,1676894400,1676898000,1676901600,1676905200,1676908800,1676912400,1676916000,1676919600,1676923200,1676926800],
			[-0.31, -0.84, -1.22, -1.53, -1.86, -1.87, -0.17, -0.72, 0.01, 2.7, 4.33, 6.69, 8.67, 10.4, 11.06, 10.61, 9.64, 8.44, 7.12, 6.27, 5.92, 5.36, 5.05, 5.41, 5.48, 5.48, 5.24, 4.79, 3.89, 4.65, 4.96, 5.14, 5.44, 6.31, 6.65, 6.77, 6.85, 7.25, 8.84, 9.11, 8.5, 7.99, 7.7, null, 8.28, 8.61, 8.81, 9.06, 9.19, null, null, null, 9.7, 9.67, 9.36, 9.13, 9.47, 9.94, 10.81, 11.2, 11.26, 11.3, 11.71, 12.36, 11.58, 10.18, 9.13, 8.26, 7.51, 6.84, 5.71, 6.34, 6.99, 7.04, 6.29, 6.92, 7.51, 7.77, 8.1, 8.61, 9.35, 9.7, 9.72, 9.64, 10.37, 11.04, 11.5, 10.98, 10.77, 9.85, 9.18, 8.96, 8.35, 8.48, 8.64, 8.6, 8.87, 8.79, 8.73, 7.5, 5.58, 5.12, 4.52, 4.44, 4.6, 6.01, 6.68, 7.14, 8.25, 8.31, 7.97, 8.3, 7.68, 6.82, 6.15, 5.19, 5.2, 5.23, 5.34, 5.4, 5.59, 5.53, 5.75, 5.89, 6.27, 6.58, 7.05, 7.46, 7.81, 8.24, 8.66, 8.75, 8.99, 9.31, 9.64, 9.85, 10.08, 9.91, 9.41, 9.04, 8.89, 9.02, 9.22],
			[0.0, 0.0, 0.0, 0.08, 0.0, 0.14, 0.45, 0.0, 0.07, 0.71, 1.46, 1.18, 1.36, 1.59, 1.4, 1.17, 0.65, 0.44, 0.47, 0.55, 0.65, 0.73, 0.76, 1.56, 1.97, 1.64, 1.95, 1.78, 1.78, 2.38, 2.14, 1.81, 2.09, 1.85, 2.13, 2.12, 2.01, 2.5, 2.34, 2.36, 2.83, 1.68, 0.95, null, 3.22, 2.74, 1.92, 2.48, 2.71, null, null, null, 3.85, 4.28, 4.28, 4.49, 5.0, 5.66, 5.53, 5.17, 4.9, 4.24, 3.26, 3.76, 5.34, 4.04, 3.92, 3.51, 3.01, 1.71, 1.3, 1.77, 1.84, 2.07, 1.2, 1.2, 0.89, 0.69, 1.57, 3.14, 3.53, 3.56, 3.59, 3.64, 3.88, 4.03, 4.64, 4.22, 3.54, 2.68, 2.22, 1.48, 0.57, 1.0, 1.31, 1.35, 2.08, 1.54, 1.39, 3.02, 1.75, 1.86, 1.75, 1.52, 1.15, 0.9, 0.99, 0.87, 0.9, 0.83, 1.15, 1.04, 1.12, 0.85, 0.83, 0.91, 1.31, 1.92, 2.38, 3.05, 2.65, 2.33, 2.4, 2.59, 2.66, 4.26, 4.65, 4.71, 4.13, 3.89, 4.04, 3.91, 3.58, 3.4, 3.14, 2.91, 2.52, 2.81, 3.1, 3.26, 3.22, 2.53, 2.6],
			[157.93, 157.88, 157.88, 157.86, 157.9, 157.56, 155.03, 176.0, 177.18, 169.99, 193.29, 195.21, 194.96, 200.24, 187.29, 173.4, 192.69, 184.13, 193.11, 212.23, 199.19, 187.96, 199.62, 208.42, 201.37, 215.99, 212.76, 198.66, 193.21, 201.06, 200.8, 201.83, 198.28, 213.07, 216.83, 214.85, 217.03, 209.13, 212.71, 192.74, 200.67, 198.93, 194.0, null, 201.67, 211.24, 221.28, 236.5, 249.12, null, null, null, 239.87, 239.14, 243.2, 236.07, 241.25, 241.27, 239.48, 245.39, 250.14, 243.82, 246.18, 260.71, 279.12, 287.16, 276.02, 285.17, 278.27, 268.96, 242.19, 242.29, 238.69, 239.6, 240.41, 234.04, 228.64, 219.32, 198.23, 210.51, 239.36, 244.45, 243.0, 254.55, 259.83, 268.59, 269.01, 273.81, 272.55, 275.48, 273.84, 279.87, 271.29, 247.65, 237.98, 240.03, 240.5, 242.93, 257.22, 339.91, 22.16, 13.69, 6.79, 5.93, 6.82, 4.5, 345.11, 322.86, 298.12, 334.05, 301.66, 258.76, 262.85, 276.74, 277.44, 260.38, 244.11, 242.45, 237.08, 239.46, 230.86, 228.91, 224.88, 230.33, 235.21, 241.07, 241.79, 240.79, 240.31, 244.61, 245.46, 242.97, 247.12, 246.22, 244.66, 249.34, 247.04, 248.55, 246.88, 245.35, 241.71, 247.94, 248.61]
		];

		let opts = {
			width: 800,
			height: 400,
			scales: {
				y2: {
					range: [0, 30],
				}
			},
			axes: [
				{},
				{
					label: "Temp °C",
					stroke: "orangered",
				},
				{
					scale: 'y2',
					label: "Wind m/s",
					stroke: "purple",
					side: 1,
					grid: {
						show: false,
					}
				}
			],
			series: [
				{},
				{
					label: "Temp °C",
					stroke: "orangered",
				},
				{
					label: "Wind m/s",
					stroke: "purple",
					scale: 'y2'
				},
				{
					label: "Wind dir °",
					stroke: "blue",
					auto: false,
					points: { show: false },
					paths: (u, seriesIdx, fromIdx, toIdx) => {
						let series = u.series[seriesIdx];

						let times = u.data[0];
						let speeds = u.data[2];
						let dirs = u.data[3];

						u.ctx.save();

						//u.ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
						//u.ctx.clip();

						u.ctx.beginPath();

						for (let i = fromIdx; i <= toIdx; i++) {
							if (speeds[i] == null) continue;

							let xPx = u.valToPos(times[i], 'x', true);
							let yPx = u.valToPos(speeds[i], 'y2', true);

							let len = 15;
							let theta = (dirs[i] - 90) * (Math.PI / 180);
							let dx = len * Math.cos(theta);
							let dy = len * Math.sin(theta);

							u.ctx.moveTo(xPx, yPx);
							u.ctx.lineTo(xPx + dx, yPx + dy);
						}

						u.ctx.strokeStyle = series.stroke();
						u.ctx.stroke();

						u.ctx.restore();
					},
				},
			]
		};

		let u = new uPlot(opts, data, document.body);
	</script>
</body>
</html>