demo: add/remove data dynamically

huww98 · Feb 26, 2022 · 39b58ab · 39b58ab
1 parent 09a4fb7
commit 39b58ab
Showing 1 changed file with 66 additions and 0 deletions.
diff --git a/demo/dynamic_data.html b/demo/dynamic_data.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>TimeChart Demo (Dynamic Data)</title>
+</head>
+<body>
+    <p>Data points can be added or removed dynamically.</p>
+    <div id="chart" style="width: 100%; height: 640px;"></div>
+    <button id="stop-btn">Stop</button>
+
+    <script src="https://cdn.jsdelivr.net/npm/d3-array@3"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3-format@3"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3-time@3"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3-time-format@4"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3-scale@4"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3-selection@3"></script>
+    <script src="https://cdn.jsdelivr.net/npm/d3-axis@3"></script>
+
+    <!-- <script src="../dist/timechart.min.js"></script> -->
+    <script src="../dist/timechart.umd.js"></script>
+    <script>
+        const el = document.getElementById('chart');
+        const data = [];
+        const y = x => Math.sin(x * 0.005);
+        for (let x = 0; x < 1000; x += 10) {
+            data.push({ x, y: y(x) });
+        }
+        const chart = new TimeChart(el, {
+            xRange: { min: 0, max: 5000, },
+            yRange: { min: -1, max: 1, },
+            series: [{ data, name: 'Random' }],
+        });
+
+        const base = performance.now();
+        let t = 0;
+        function update() {
+            const time = performance.now() - base;
+            for (; t < time; t += 10) {
+                const cycle = Math.floor(t / 4000);
+                let x = t - cycle * 4000;
+                if (cycle % 2 === 0) {
+                    x = x + 1000;
+                    data.push({ x, y: y(x) });
+                    data.shift();
+                } else {
+                    x = 4000 - x;
+                    data.unshift({ x, y: y(x) });
+                    data.pop();
+                }
+            }
+            chart.update();
+        }
+
+        const ev = setInterval(update, 10);
+
+        document.getElementById('stop-btn').addEventListener('click', () => {
+            clearInterval(ev);
+        })
+    </script>
+</body>
+</html>