update

edgecollective · Jan 7, 2020 · 948c59b · 948c59b
1 parent fac8d94
commit 948c59b
Showing 1 changed file with 125 additions and 0 deletions.
diff --git a/node_basic_4/plotting/spark.html b/node_basic_4/plotting/spark.html
@@ -0,0 +1,125 @@
+<html>
+    <head>
+        <!-- Load plotly.js into the DOM -->
+        <script src="https://mbostock.github.com/d3/d3.v2.js"></script>
+        <style>
+			/* tell the SVG path to be a thin blue line without any area fill */
+			path {
+				stroke: steelblue;
+				stroke-width: 1;
+				fill: none;
+			}
+		</style>
+      </head>
+
+<body>
+
+
+    <div id="graph" class="aGraph" style="position:absolute;top:0px;left:0; float:left; width:300px; height:60px;"></div>
+    <div id="graph2" class="aGraph" style="position:absolute;top:50px;left:0; float:left; width:300px; height:60px;"></div>
+
+
+    <script>
+
+
+
+    fetch('http://localhost:8000/api/user/latest')
+  .then((response) => {
+    return response.json();
+  })
+  .then((myJson) => {
+    //console.log("hallo");
+    console.log(myJson);
+
+
+    var data = myJson.data;
+var timestamp = [];
+var current = [];
+var voltage = [];
+var resistance = [];
+var xvals = [];
+
+// get the data
+for (i in data) {
+  //xvals.push(i);
+  xvals.push(data[i].id);
+  timestamp.push(data[i].timestamp);
+  current.push(data[i].current);
+  voltage.push(data[i].voltage);
+  resistance.push(data[i].resistance);
+}
+
+console.log(current);
+
+		// create an SVG element inside the #graph div that fills 100% of the div
+		var graph = d3.select("#graph").append("svg:svg").attr("width", "100%").attr("height", "100%");
+
+		// create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
+		//var data = [3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9];
+
+		// X scale will fit values from 0-10 within pixels 0-100
+		var x = d3.scale.linear().domain([0, 10]).range([0, 50]);
+		// Y scale will fit values from 0-10 within pixels 0-100
+		var y = d3.scale.linear().domain([-30, 30]).range([0, 30]);
+
+		// create a line object that represents the SVN line we're creating
+		var line = d3.svg.line()
+			// assign the X function to plot our line as we wish
+			.x(function(d,i) { 
+				// verbose logging to show what's actually being done
+				console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
+				// return the X coordinate where we want to plot this datapoint
+				return x(i); 
+			})
+			.y(function(d) { 
+				// verbose logging to show what's actually being done
+				console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
+				// return the Y coordinate where we want to plot this datapoint
+				return y(d); 
+			})
+
+			// display the line by appending an svg:path element with the data line we created above
+			graph.append("svg:path").attr("d", line(current));
+
+        });
+
+    </script>
+
+<script>
+
+    // create an SVG element inside the #graph div that fills 100% of the div
+    var graph = d3.select("#graph2").append("svg:svg").attr("width", "100%").attr("height", "100%");
+
+    // create a simple data array that we'll plot with a line (this array represents only the Y values, X will just be the index location)
+    var data = [4,5,6,3,4,6,4,3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9];
+
+    // X scale will fit values from 0-10 within pixels 0-100
+    var x = d3.scale.linear().domain([0, 10]).range([0, 50]);
+    // Y scale will fit values from 0-10 within pixels 0-100
+    var y = d3.scale.linear().domain([-30, 30]).range([0, 30]);
+
+    // create a line object that represents the SVN line we're creating
+    var line = d3.svg.line()
+        // assign the X function to plot our line as we wish
+        .x(function(d,i) { 
+            // verbose logging to show what's actually being done
+            console.log('Plotting X value for data point: ' + d + ' using index: ' + i + ' to be at: ' + x(i) + ' using our xScale.');
+            // return the X coordinate where we want to plot this datapoint
+            return x(i); 
+        })
+        .y(function(d) { 
+            // verbose logging to show what's actually being done
+            console.log('Plotting Y value for data point: ' + d + ' to be at: ' + y(d) + " using our yScale.");
+            // return the Y coordinate where we want to plot this datapoint
+            return y(d); 
+        })
+
+        // display the line by appending an svg:path element with the data line we created above
+        graph.append("svg:path").attr("d", line(data));
+
+</script>
+
+
+
+  </body>
+</html>