Graph stuff

www/main.html

@@ -26,6 +26,10 @@
                                      ".              map            data-hp         console";
             }
 
+            canvas {
+                background: #f00;
+            }
+
             body > div {
                 display: grid;
             }
@@ -119,10 +123,10 @@
             <button onclick="connect()">Connect</button>
         </div>
         <div class="map border"></div>
-        <div class="border" id="data_al"></div>
-        <div class="border" id="data_sp"></div>
-        <div class="border" id="data_ps"></div>
-        <div class="border" id="data_hp"></div>
+        <div class="border data" id="data_al"></div>
+        <div class="border data" id="data_sp"></div>
+        <div class="border data" id="data_ps"></div>
+        <div class="border data" id="data_hp"></div>
         <div class="console border">
             <pre id="stdout"></pre>
         </div>
@@ -136,10 +140,34 @@
             var fs;
 
             // init graphs
-            let canvas = document.createElement("canvas");
-            canvas.width = canvas.height = 215;
-            data_al.appendChild(canvas);
-            let graph = new Graph(canvas, "#FFBF00");
+            let dataContainers = document.getElementsByClassName("data");
+            for (let i = 0; i < dataContainers.length; i++) {
+                let canvas = document.createElement("canvas");
+                canvas.width = canvas.height = 215;
+                dataContainers[i].appendChild(canvas);
+
+                let graph;
+                if (true) // Use moving graph
+                    graph = new MovingGraph(canvas, "#FFBF00", 100, 64, Float32Array);
+                else
+                    graph = new Graph(canvas, "#FFBF00", 100);
+                
+                graph.smooth = true; // Can change on fly
+
+                let amount = Math.random() * graph.bufferLength * 1.4;
+                for (let v = 0; v < amount; v++) {
+                    graph.add( Math.random() * 100 );
+                }
+                graph.draw();
+                a = graph;
+
+                setInterval(function(){
+                    graph.add( Math.random() * 100 );
+                    graph.draw();
+                }, 100);
+
+                break;
+            }
 
             function* buffer2HexArray(buff, start = 0, end = buff.byteLength) {
                 for (let i = start; i < end; i++) {