diff --git a/index.html b/index.html
index cb19eb422f9b32a40f23c35d41bafef6a600799a..c90ef6807d1c3f48a6acad9b4f327bf55df86278 100644
--- a/index.html
+++ b/index.html
@@ -210,6 +210,31 @@
</div>
</div>
</div>
+ <div class="row">
+ <div class="col-xl-6">
+ <div class="card mb-4">
+ <div class="card-header">
+ <!-- No free scatter plot icon available; use this instead -->
+ <i class="fas fa-braille mr-1"></i>
+ Scatter Plot Example
+ </div>
+ <div class="card-body">
+ <div id="chart-scatter-plot" width="100%" height="40"></div>
+ </div>
+ </div>
+ </div>
+ <div class="col-xl-6">
+ <div class="card mb-4">
+ <div class="card-header">
+ <i class="far fa-chart-bar mr-1"></i>
+ Bar Chart Example
+ </div>
+ <div class="card-body">
+ <div id="chart-bar" width="100%" height="40"></div>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</main>
<footer class="py-4 bg-light mt-auto">
diff --git a/public/js/appChart.js b/public/js/appChart.js
index e5013804aaeddcd007c338304f0f13f2fa9d81b7..2cb42c72ae856cd3fd4ed1ccd5fdf697d1e4652c 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -573,6 +573,352 @@ const observationsPromisesRLArr = datastreamsUrlRLArr.map((obsUrl) =>
// console.log(x)
// );
+const drawScatterPlotHC = function () {
+ // Ruecklauf
+ const ruecklaufArr = [
+ [1578193200000, 69.1999969482422],
+ [1578196800000, 69.1999969482422],
+ [1578200400000, 69.1999969482422],
+ [1578204000000, 69.1999969482422],
+ [1578207600000, 69.1999969482422],
+ [1578211200000, 69.1999969482422],
+ [1578214800000, 69.1999969482422],
+ [1578218400000, 69.1999969482422],
+ [1578222000000, 69.1999969482422],
+ [1578225600000, 69.1999969482422],
+ [1578229200000, 69.1999969482422],
+ [1578232800000, 69.1999969482422],
+ [1578236400000, 69.1999969482422],
+ [1578240000000, 69.1999969482422],
+ [1578243600000, 69.1999969482422],
+ [1578247200000, 69.1999969482422],
+ [1578250800000, 69.1999969482422],
+ [1578254400000, 69.1999969482422],
+ [1578258000000, 69.1999969482422],
+ [1578261600000, 69.1999969482422],
+ [1578265200000, 69.1999969482422],
+ [1578268800000, 69.1999969482422],
+ [1578272400000, 69.1999969482422],
+ [1578276000000, 69.1999969482422],
+ [1578279600000, 69.1999969482422],
+ [1578283200000, 69.1999969482422],
+ [1578286800000, 69.1999969482422],
+ [1578290400000, 69.1999969482422],
+ [1578294000000, 69.1999969482422],
+ [1578297600000, 69.1999969482422],
+ [1578301200000, 69.1999969482422],
+ [1578304800000, 69.1999969482422],
+ [1578308400000, 69.1999969482422],
+ [1578312000000, 69.1999969482422],
+ [1578315600000, 69.1999969482422],
+ [1578319200000, 69.1999969482422],
+ [1578322800000, 69.1999969482422],
+ [1578326400000, 69.1999969482422],
+ [1578330000000, 69.1999969482422],
+ [1578333600000, 69.1999969482422],
+ [1578337200000, 69.1999969482422],
+ [1578340800000, 69.1999969482422],
+ [1578344400000, 69.1999969482422],
+ [1578348000000, 69.1999969482422],
+ [1578351600000, 70.3556109079997],
+ [1578355200000, 76.920997634146],
+ [1578358800000, 79.4292947098697],
+ [1578362400000, 79.2650916245309],
+ [1578366000000, 79.6125674172757],
+ [1578369600000, 79.0597236964905],
+ [1578373200000, 77.7484098868052],
+ [1578376800000, 77.1226613864899],
+ [1578380400000, 76.9194480415149],
+ [1578384000000, 78.0028471359237],
+ [1578387600000, 77.1535494270819],
+ [1578391200000, 75.0470741498029],
+ [1578394800000, 74.679502580818],
+ [1578398400000, 73.6077361986314],
+ [1578402000000, 72.5580677314758],
+ [1578405600000, 72.3134755830553],
+ [1578409200000, 73.2778338997311],
+ [1578412800000, 73.7656394293467],
+ [1578416400000, 74.4736907299466],
+ [1578420000000, 74.046935040758],
+ [1578423600000, 73.4957105572807],
+ [1578427200000, 73.9627712815163],
+ [1578430800000, 74.0438044241729],
+ [1578434400000, 73.3727496036106],
+ [1578438000000, 73.1666655679279],
+ [1578441600000, 73.3418058388816],
+ [1578445200000, 73.6250001589457],
+ [1578448800000, 73.829112378629],
+ [1578452400000, 74.564083528116],
+ [1578456000000, 75.5183061171072],
+ [1578459600000, 77.3372781058983],
+ [1578463200000, 78.0196371225993],
+ [1578466800000, 77.6398578971368],
+ [1578470400000, 78.5464104081542],
+ [1578474000000, 78.7977605936686],
+ [1578477600000, 76.0006624035588],
+ [1578481200000, 74.818987728345],
+ [1578484800000, 72.7776491559135],
+ [1578488400000, 71.1266380795161],
+ [1578492000000, 71.3866485616896],
+ [1578495600000, 72.1584558128357],
+ [1578499200000, 72.7288795283423],
+ [1578502800000, 73.2401491424669],
+ [1578506400000, 72.613320930343],
+ [1578510000000, 71.7903886201647],
+ [1578513600000, 71.4483344078064],
+ [1578517200000, 71.8162703686467],
+ [1578520800000, 71.3690680013303],
+ [1578524400000, 70.6132688085203],
+ [1578528000000, 69.9669739277875],
+ [1578531600000, 69.2502318650422],
+ [1578535200000, 68.8407318482576],
+ [1578538800000, 71.4223982252898],
+ [1578542400000, 68.8941290716666],
+ [1578546000000, 71.8311421724037],
+ [1578549600000, 72.5245706435945],
+ ];
+
+ // Power
+ const powerArr = [
+ [1578193200000, 0],
+ [1578196800000, 0],
+ [1578200400000, 0],
+ [1578204000000, 0],
+ [1578207600000, 0],
+ [1578211200000, 0],
+ [1578214800000, 0],
+ [1578218400000, 0],
+ [1578222000000, 0],
+ [1578225600000, 0],
+ [1578229200000, 0],
+ [1578232800000, 0],
+ [1578236400000, 0],
+ [1578240000000, 0],
+ [1578243600000, 0],
+ [1578247200000, 0],
+ [1578250800000, 0],
+ [1578254400000, 0],
+ [1578258000000, 0],
+ [1578261600000, 0],
+ [1578265200000, 0],
+ [1578268800000, 0],
+ [1578272400000, 0],
+ [1578276000000, 0],
+ [1578279600000, 0],
+ [1578283200000, 0],
+ [1578286800000, 0],
+ [1578290400000, 0],
+ [1578294000000, 0],
+ [1578297600000, 0],
+ [1578301200000, 0],
+ [1578304800000, 0],
+ [1578308400000, 0],
+ [1578312000000, 0],
+ [1578315600000, 0],
+ [1578319200000, 0],
+ [1578322800000, 0],
+ [1578326400000, 0],
+ [1578330000000, 0],
+ [1578333600000, 0],
+ [1578337200000, 0],
+ [1578340800000, 0],
+ [1578344400000, 0],
+ [1578348000000, 0],
+ [1578351600000, 0.831280025800069],
+ [1578355200000, 27.4361266860337],
+ [1578358800000, 4.02296011930285],
+ [1578362400000, 5.46578637448993],
+ [1578366000000, 189.045738115567],
+ [1578369600000, 262.879154692536],
+ [1578373200000, 182.996291840137],
+ [1578376800000, 253.720326864073],
+ [1578380400000, 266.71791350888],
+ [1578384000000, 258.650130305165],
+ [1578387600000, 256.817462126146],
+ [1578391200000, 251.198874591439],
+ [1578394800000, 245.782954276794],
+ [1578398400000, 225.835229413786],
+ [1578402000000, 191.164833256192],
+ [1578405600000, 189.317473084174],
+ [1578409200000, 160.866751228135],
+ [1578412800000, 165.104705085896],
+ [1578416400000, 185.380724406267],
+ [1578420000000, 6.318082232318],
+ [1578423600000, 22.6244981930396],
+ [1578427200000, 0.125080846609247],
+ [1578430800000, 0.858333364129066],
+ [1578434400000, 3.15562303745482],
+ [1578438000000, 1.73965485449897],
+ [1578441600000, 3.73938900530338],
+ [1578445200000, 0.641666680574417],
+ [1578448800000, 1.64397225697835],
+ [1578452400000, 14.7165156847371],
+ [1578456000000, 6.7406491904815],
+ [1578459600000, 257.018884414906],
+ [1578463200000, 282.409075120573],
+ [1578466800000, 284.999958205159],
+ [1578470400000, 291.20836768991],
+ [1578474000000, 285.753944205729],
+ [1578477600000, 248.43810322171],
+ [1578481200000, 227.135268204399],
+ [1578484800000, 182.10778157076],
+ [1578488400000, 169.076414526325],
+ [1578492000000, 160.098294117384],
+ [1578495600000, 149.832191919638],
+ [1578499200000, 195.966023142751],
+ [1578502800000, 159.01891281008],
+ [1578506400000, 3.94323859943668],
+ [1578510000000, 9.29238140483663],
+ [1578513600000, 4.09348021179692],
+ [1578517200000, 0],
+ [1578520800000, 0],
+ [1578524400000, 0],
+ [1578528000000, 0],
+ [1578531600000, 0],
+ [1578535200000, 0],
+ [1578538800000, 154.315364068476],
+ [1578542400000, 193.405831769548],
+ [1578546000000, 136.484141248209],
+ [1578549600000, 209.041194383494],
+ ];
+
+ const CHART_TITLE = "Height Versus Weight of 507 Individuals by Gender";
+ const CHART_SUBTITLE = "Source: Heinz 2003";
+
+ const X_AXIS_TITLE = "Height (cm)";
+
+ const SERIES_1_NAME = "Rücklauftemp";
+ const SERIES_1_SYMBOL_COLOR = "rgba(119, 152, 191, .5)";
+ const SERIES_1_TEXT_COLOR = "rgb(119, 152, 191)"; // remove transparency from symbol color for a more "intense" color
+ const SERIES_1_SYMBOL = "°C";
+
+ const SERIES_2_NAME = "Power";
+ const SERIES_2_SYMBOL_COLOR = "rgba(223, 83, 83, .5)";
+ const SERIES_2_TEXT_COLOR = "rgb(223, 83, 83)"; // remove transparency from symbol color for a more "intense" color
+ const SERIES_2_SYMBOL = "kW";
+
+ Highcharts.chart("chart-scatter-plot", {
+ chart: {
+ type: "scatter",
+ zoomType: "xy",
+ },
+
+ title: {
+ text: CHART_TITLE,
+ },
+
+ subtitle: {
+ text: CHART_SUBTITLE,
+ },
+
+ xAxis: {
+ title: {
+ enabled: true,
+ text: X_AXIS_TITLE,
+ },
+ type: "datetime",
+ startOnTick: true,
+ endOnTick: true,
+ showLastLabel: true,
+ },
+
+ yAxis: [
+ {
+ // Primary yAxis
+ labels: {
+ format: `{value} ${SERIES_1_SYMBOL}`,
+ style: {
+ color: SERIES_1_TEXT_COLOR,
+ },
+ },
+ title: {
+ text: SERIES_1_NAME,
+ style: {
+ color: SERIES_1_TEXT_COLOR,
+ },
+ },
+ },
+ {
+ // Secondary yAxis
+ title: {
+ text: SERIES_2_NAME,
+ style: {
+ color: SERIES_2_TEXT_COLOR,
+ },
+ },
+ labels: {
+ format: `{value} ${SERIES_2_SYMBOL}`,
+ style: {
+ color: SERIES_2_TEXT_COLOR,
+ },
+ },
+ opposite: true,
+ },
+ ],
+
+ legend: {
+ layout: "vertical",
+ align: "left",
+ verticalAlign: "top",
+ x: 100,
+ y: 70,
+ floating: true,
+ backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
+ borderWidth: 1,
+ },
+
+ plotOptions: {
+ scatter: {
+ marker: {
+ radius: 5,
+ states: {
+ hover: {
+ enabled: true,
+ lineColor: "rgb(100,100,100)",
+ },
+ },
+ },
+ states: {
+ hover: {
+ marker: {
+ enabled: false,
+ },
+ },
+ },
+ tooltip: {
+ headerFormat: "{point.x:%e %b, %Y %H:%M:%S}: <b>{point.y}</b>",
+ pointFormat: "{point.x} cm, {point.y} kg",
+ valueDecimals: 2,
+ },
+ },
+ },
+
+ series: [
+ {
+ name: SERIES_1_NAME,
+ color: SERIES_1_SYMBOL_COLOR,
+ data: ruecklaufArr,
+ tooltip: {
+ valueSuffix: ` ${SERIES_1_SYMBOL}`,
+ },
+ },
+ {
+ name: SERIES_2_NAME,
+ color: SERIES_2_SYMBOL_COLOR,
+ data: powerArr,
+ // need this property for the dual y-axes to work
+ // defines the y-axis that this series refers to
+ yAxis: 1,
+ tooltip: {
+ valueSuffix: ` ${SERIES_2_SYMBOL}`,
+ },
+ },
+ ],
+ });
+};
+
+drawScatterPlotHC();
+
export {
BASE_URL,
QUERY_PARAMS_COMBINED,