Add line chart / Highcharts

index.html

@@ -28,7 +28,9 @@
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
     <!-- Higcharts lib -->
-    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <!-- Does not play well with `Highstock`; see: https://www.highcharts.com/errors/16/
+    <script src="https://code.highcharts.com/highcharts.js"></script> -->
+    <script src="https://code.highcharts.com/stock/highstock.js"></script>
     <script src="https://code.highcharts.com/stock/modules/data.js"></script>
     <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
     <script src="https://code.highcharts.com/stock/modules/export-data.js"></script>

public/js/appChart.js

@@ -139,6 +139,54 @@ const drawHeatMapHC = function (obsArray) {
   });
 };
 
+/**
+ * Convert the observations' phenomenonTime from an ISO 8601 string to Unix epoch
+ * @param {*} obsArray - Response from SensorThings API as array
+ * @returns {Array}
+ */
+const formatSTAResponseForLineChart = function (obsArray) {
+  const dataSTAFormatted = [];
+  obsArray.forEach((result) => {
+    const timestampObs = new Date(result[0].slice(0, -1)).getTime(); // slice() removes trailing "Z" character in timestamp
+    const valueObs = result[1];
+    dataSTAFormatted.push([timestampObs, valueObs]);
+  });
+  return dataSTAFormatted;
+};
+
+/**
+ * Draw a line chart using Highcharts library
+ * @param {*} obsArray - Response from SensorThings API
+ * @returns {void}
+ */
+const drawLineChartHC = function (obsArray) {
+  // Create the chart
+  Highcharts.stockChart("chart-line", {
+    chart: {
+      zoomType: "x",
+    },
+
+    rangeSelector: {
+      selected: 1,
+    },
+
+    title: {
+      text: "AAPL Stock Price",
+    },
+
+    series: [
+      {
+        name: "AAPL",
+        data: formatSTAResponseForLineChart(obsArray),
+        tooltip: {
+          valueDecimals: 2,
+        },
+        turboThreshold: Number.MAX_VALUE, // #3404, remove after 4.0.5 release
+      },
+    ],
+  });
+};
+
 /**
  * Follows "@iot.nextLink" links in SensorThingsAPI's response
  * Appends new results to existing results
@@ -202,4 +250,5 @@ followNextLink(
   })
   .then((observationArr) => {
     drawHeatMapHC(observationArr);
+    drawLineChartHC(observationArr);
   });