demos/y-shifted-series.html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Y-shifted Series</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 xs = [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];
			let vals = [0,1,2,3,4,5,6,7,8,9,10];

			let data = [
				xs,
				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
				xs.map((t, i) => vals[Math.floor(Math.random() * vals.length)]),
			];

			const normal = {
				values: (u, splits)       => splits,
				fillTo: (u, seriesIdx)    => 0,
				value:  (u, v, seriesIdx) => v,
				data:   (data)            => data,
				range:  [0, 10],
			};

			const shifted = {
				values: (u, splits)       => splits.map(v => v % 10 == 0 ? "Core #" + (Math.floor(v/10) + 1) : v % 10),
				fillTo: (u, seriesIdx)    => 10 * (seriesIdx - 1),
				value:  (u, v, seriesIdx) => v - 10 * (seriesIdx - 1),
				data:   (data)            => data.map((vals, seriesIdx) => seriesIdx < 1 ? vals : vals.map(xVal => xVal + 10 * (seriesIdx - 1))),
				range:  [0, 30],
			};

			let mode = shifted;

			const fillTo = (u, seriesIdx)    => mode.fillTo(u, seriesIdx);
			const value  = (u, v, seriesIdx) => mode.value(u, v, seriesIdx);
			const values = (u, splits)       => mode.values(u, splits);
			const range  = (u)               => mode.range;

			const opts = {
				width: 1920,
				height: 600,
				title: "Y-shifted Series",
				scales: {
					x: {
						time: false,
					},
					y: {
						range,
					},
				},
				axes: [
					{},
					{
						size: 70,
						values,
					},
				],
				series: [
					{},
					{
						stroke: "red",
						label: "Core #1",
						fill: "rgba(255,0,0,0.1)",
						fillTo,
						value,
					},
					{
						stroke: "green",
						label: "Core #2",
						fill: "rgba(0,255,0,0.1)",
						fillTo,
						value,
					},
					{
						paths: uPlot.paths.bars(),
						stroke: "blue",
						label: "Core #3",
						fill: "rgba(0,0,255,0.1)",
						fillTo,
						value,
					},
				],
			};

			let u = new uPlot(opts, mode.data(data), document.body);

			setInterval(() => {
				if (mode == shifted)
					mode = normal;
				else
					mode = shifted;

				u.setData(mode.data(data));
			}, 2000);
		</script>
	</body>
</html>