diff --git a/public/css/main.css b/public/css/main.css
index 367eea7..212b455 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -171,7 +171,7 @@ label.field-with-error {
color: red;
}
-img.stats {
+.stats {
width: 100%;
display: block;
}
diff --git a/public/js/net-plot.js b/public/js/net-plot.js
new file mode 100644
index 0000000..2ce67d8
--- /dev/null
+++ b/public/js/net-plot.js
@@ -0,0 +1,48 @@
+// Load netDiv.
+const netDiv = document.getElementById("net-stats");
+
+// Enter async context. Makes things easier.
+(async function() {
+ // Fetch JSON
+ const netDataReq = await fetch("/net-in.json");
+ const netData = await netDataReq.json();
+
+ // Get list of entries
+ const legends = netData.meta.legend;
+
+ // Holds the plotly.JS data
+ const data = [];
+
+ // Create date objects for x-axis
+ const x = netData.data.map(a => new Date(a[0] * 1e3));
+
+ // Iterate through legends, fill up data.
+ for (let i = 0; i < legends.length; i++) {
+ const name = legends[i];
+ const y = netData.data.map(a => a[i+1]);
+
+ // Add data entry to array.
+ data.push({
+ x,
+ y,
+ name,
+ type: "bar",
+ });
+ }
+
+ // Format
+ const layout = {
+ barmode: "stack",
+ title: {
+ text: "Traffic In",
+ },
+ yaxis: {
+ title: {
+ text: "Bytes/S",
+ },
+ },
+ };
+
+ // Create plot
+ Plotly.newPlot(netDiv, data, layout);
+})()
diff --git a/templates/main/statsPage.html.ep b/templates/main/statsPage.html.ep
index 81871cd..9aaf62a 100644
--- a/templates/main/statsPage.html.ep
+++ b/templates/main/statsPage.html.ep
@@ -9,4 +9,10 @@
+
+
+
+