diff --git a/index.html b/index.html index 46c5dc07042715c9ca6dcea2ecad9e439c3e45b9..e525e37ad5878a117f1e41b7483b44a213cdb838 100644 --- a/index.html +++ b/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> diff --git a/public/js/appChart.js b/public/js/appChart.js index f1a1d08b8f1aae01a0b9b239fa1ce0b31f4252d8..64a5e30fb66ba0432e45d19f209011e18bdc2181 100644 --- a/public/js/appChart.js +++ b/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); });