From b352f43a834f0b7df49a5f73949829f6300451e2 Mon Sep 17 00:00:00 2001 From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de> Date: Tue, 24 Aug 2021 13:08:25 +0200 Subject: [PATCH 1/4] Add HTML for scatter plot and bar chart --- index.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/index.html b/index.html index cb19eb4..c90ef68 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"> -- GitLab From d8e51e64fe1af3a75f5e85e11e525d967ecfa55f Mon Sep 17 00:00:00 2001 From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de> Date: Tue, 24 Aug 2021 13:12:58 +0200 Subject: [PATCH 2/4] New function: draw scatter plot Add the basic structure of scatter plot chart --- public/js/appChart.js | 586 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 586 insertions(+) diff --git a/public/js/appChart.js b/public/js/appChart.js index e501380..4fb361e 100644 --- a/public/js/appChart.js +++ b/public/js/appChart.js @@ -573,6 +573,592 @@ const observationsPromisesRLArr = datastreamsUrlRLArr.map((obsUrl) => // console.log(x) // ); +const drawScatterPlotHC = function () { + Highcharts.chart("chart-scatter-plot", { + chart: { + type: "scatter", + zoomType: "xy", + }, + title: { + text: "Height Versus Weight of 507 Individuals by Gender", + }, + subtitle: { + text: "Source: Heinz 2003", + }, + xAxis: { + title: { + enabled: true, + text: "Height (cm)", + }, + startOnTick: true, + endOnTick: true, + showLastLabel: true, + }, + yAxis: { + title: { + text: "Weight (kg)", + }, + }, + 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: "<b>{series.name}</b><br>", + pointFormat: "{point.x} cm, {point.y} kg", + }, + }, + }, + series: [ + { + name: "Female", + color: "rgba(223, 83, 83, .5)", + data: [ + [161.2, 51.6], + [167.5, 59.0], + [159.5, 49.2], + [157.0, 63.0], + [155.8, 53.6], + [170.0, 59.0], + [159.1, 47.6], + [166.0, 69.8], + [176.2, 66.8], + [160.2, 75.2], + [172.5, 55.2], + [170.9, 54.2], + [172.9, 62.5], + [153.4, 42.0], + [160.0, 50.0], + [147.2, 49.8], + [168.2, 49.2], + [175.0, 73.2], + [157.0, 47.8], + [167.6, 68.8], + [159.5, 50.6], + [175.0, 82.5], + [166.8, 57.2], + [176.5, 87.8], + [170.2, 72.8], + [174.0, 54.5], + [173.0, 59.8], + [179.9, 67.3], + [170.5, 67.8], + [160.0, 47.0], + [154.4, 46.2], + [162.0, 55.0], + [176.5, 83.0], + [160.0, 54.4], + [152.0, 45.8], + [162.1, 53.6], + [170.0, 73.2], + [160.2, 52.1], + [161.3, 67.9], + [166.4, 56.6], + [168.9, 62.3], + [163.8, 58.5], + [167.6, 54.5], + [160.0, 50.2], + [161.3, 60.3], + [167.6, 58.3], + [165.1, 56.2], + [160.0, 50.2], + [170.0, 72.9], + [157.5, 59.8], + [167.6, 61.0], + [160.7, 69.1], + [163.2, 55.9], + [152.4, 46.5], + [157.5, 54.3], + [168.3, 54.8], + [180.3, 60.7], + [165.5, 60.0], + [165.0, 62.0], + [164.5, 60.3], + [156.0, 52.7], + [160.0, 74.3], + [163.0, 62.0], + [165.7, 73.1], + [161.0, 80.0], + [162.0, 54.7], + [166.0, 53.2], + [174.0, 75.7], + [172.7, 61.1], + [167.6, 55.7], + [151.1, 48.7], + [164.5, 52.3], + [163.5, 50.0], + [152.0, 59.3], + [169.0, 62.5], + [164.0, 55.7], + [161.2, 54.8], + [155.0, 45.9], + [170.0, 70.6], + [176.2, 67.2], + [170.0, 69.4], + [162.5, 58.2], + [170.3, 64.8], + [164.1, 71.6], + [169.5, 52.8], + [163.2, 59.8], + [154.5, 49.0], + [159.8, 50.0], + [173.2, 69.2], + [170.0, 55.9], + [161.4, 63.4], + [169.0, 58.2], + [166.2, 58.6], + [159.4, 45.7], + [162.5, 52.2], + [159.0, 48.6], + [162.8, 57.8], + [159.0, 55.6], + [179.8, 66.8], + [162.9, 59.4], + [161.0, 53.6], + [151.1, 73.2], + [168.2, 53.4], + [168.9, 69.0], + [173.2, 58.4], + [171.8, 56.2], + [178.0, 70.6], + [164.3, 59.8], + [163.0, 72.0], + [168.5, 65.2], + [166.8, 56.6], + [172.7, 105.2], + [163.5, 51.8], + [169.4, 63.4], + [167.8, 59.0], + [159.5, 47.6], + [167.6, 63.0], + [161.2, 55.2], + [160.0, 45.0], + [163.2, 54.0], + [162.2, 50.2], + [161.3, 60.2], + [149.5, 44.8], + [157.5, 58.8], + [163.2, 56.4], + [172.7, 62.0], + [155.0, 49.2], + [156.5, 67.2], + [164.0, 53.8], + [160.9, 54.4], + [162.8, 58.0], + [167.0, 59.8], + [160.0, 54.8], + [160.0, 43.2], + [168.9, 60.5], + [158.2, 46.4], + [156.0, 64.4], + [160.0, 48.8], + [167.1, 62.2], + [158.0, 55.5], + [167.6, 57.8], + [156.0, 54.6], + [162.1, 59.2], + [173.4, 52.7], + [159.8, 53.2], + [170.5, 64.5], + [159.2, 51.8], + [157.5, 56.0], + [161.3, 63.6], + [162.6, 63.2], + [160.0, 59.5], + [168.9, 56.8], + [165.1, 64.1], + [162.6, 50.0], + [165.1, 72.3], + [166.4, 55.0], + [160.0, 55.9], + [152.4, 60.4], + [170.2, 69.1], + [162.6, 84.5], + [170.2, 55.9], + [158.8, 55.5], + [172.7, 69.5], + [167.6, 76.4], + [162.6, 61.4], + [167.6, 65.9], + [156.2, 58.6], + [175.2, 66.8], + [172.1, 56.6], + [162.6, 58.6], + [160.0, 55.9], + [165.1, 59.1], + [182.9, 81.8], + [166.4, 70.7], + [165.1, 56.8], + [177.8, 60.0], + [165.1, 58.2], + [175.3, 72.7], + [154.9, 54.1], + [158.8, 49.1], + [172.7, 75.9], + [168.9, 55.0], + [161.3, 57.3], + [167.6, 55.0], + [165.1, 65.5], + [175.3, 65.5], + [157.5, 48.6], + [163.8, 58.6], + [167.6, 63.6], + [165.1, 55.2], + [165.1, 62.7], + [168.9, 56.6], + [162.6, 53.9], + [164.5, 63.2], + [176.5, 73.6], + [168.9, 62.0], + [175.3, 63.6], + [159.4, 53.2], + [160.0, 53.4], + [170.2, 55.0], + [162.6, 70.5], + [167.6, 54.5], + [162.6, 54.5], + [160.7, 55.9], + [160.0, 59.0], + [157.5, 63.6], + [162.6, 54.5], + [152.4, 47.3], + [170.2, 67.7], + [165.1, 80.9], + [172.7, 70.5], + [165.1, 60.9], + [170.2, 63.6], + [170.2, 54.5], + [170.2, 59.1], + [161.3, 70.5], + [167.6, 52.7], + [167.6, 62.7], + [165.1, 86.3], + [162.6, 66.4], + [152.4, 67.3], + [168.9, 63.0], + [170.2, 73.6], + [175.2, 62.3], + [175.2, 57.7], + [160.0, 55.4], + [165.1, 104.1], + [174.0, 55.5], + [170.2, 77.3], + [160.0, 80.5], + [167.6, 64.5], + [167.6, 72.3], + [167.6, 61.4], + [154.9, 58.2], + [162.6, 81.8], + [175.3, 63.6], + [171.4, 53.4], + [157.5, 54.5], + [165.1, 53.6], + [160.0, 60.0], + [174.0, 73.6], + [162.6, 61.4], + [174.0, 55.5], + [162.6, 63.6], + [161.3, 60.9], + [156.2, 60.0], + [149.9, 46.8], + [169.5, 57.3], + [160.0, 64.1], + [175.3, 63.6], + [169.5, 67.3], + [160.0, 75.5], + [172.7, 68.2], + [162.6, 61.4], + [157.5, 76.8], + [176.5, 71.8], + [164.4, 55.5], + [160.7, 48.6], + [174.0, 66.4], + [163.8, 67.3], + ], + }, + { + name: "Male", + color: "rgba(119, 152, 191, .5)", + data: [ + [174.0, 65.6], + [175.3, 71.8], + [193.5, 80.7], + [186.5, 72.6], + [187.2, 78.8], + [181.5, 74.8], + [184.0, 86.4], + [184.5, 78.4], + [175.0, 62.0], + [184.0, 81.6], + [180.0, 76.6], + [177.8, 83.6], + [192.0, 90.0], + [176.0, 74.6], + [174.0, 71.0], + [184.0, 79.6], + [192.7, 93.8], + [171.5, 70.0], + [173.0, 72.4], + [176.0, 85.9], + [176.0, 78.8], + [180.5, 77.8], + [172.7, 66.2], + [176.0, 86.4], + [173.5, 81.8], + [178.0, 89.6], + [180.3, 82.8], + [180.3, 76.4], + [164.5, 63.2], + [173.0, 60.9], + [183.5, 74.8], + [175.5, 70.0], + [188.0, 72.4], + [189.2, 84.1], + [172.8, 69.1], + [170.0, 59.5], + [182.0, 67.2], + [170.0, 61.3], + [177.8, 68.6], + [184.2, 80.1], + [186.7, 87.8], + [171.4, 84.7], + [172.7, 73.4], + [175.3, 72.1], + [180.3, 82.6], + [182.9, 88.7], + [188.0, 84.1], + [177.2, 94.1], + [172.1, 74.9], + [167.0, 59.1], + [169.5, 75.6], + [174.0, 86.2], + [172.7, 75.3], + [182.2, 87.1], + [164.1, 55.2], + [163.0, 57.0], + [171.5, 61.4], + [184.2, 76.8], + [174.0, 86.8], + [174.0, 72.2], + [177.0, 71.6], + [186.0, 84.8], + [167.0, 68.2], + [171.8, 66.1], + [182.0, 72.0], + [167.0, 64.6], + [177.8, 74.8], + [164.5, 70.0], + [192.0, 101.6], + [175.5, 63.2], + [171.2, 79.1], + [181.6, 78.9], + [167.4, 67.7], + [181.1, 66.0], + [177.0, 68.2], + [174.5, 63.9], + [177.5, 72.0], + [170.5, 56.8], + [182.4, 74.5], + [197.1, 90.9], + [180.1, 93.0], + [175.5, 80.9], + [180.6, 72.7], + [184.4, 68.0], + [175.5, 70.9], + [180.6, 72.5], + [177.0, 72.5], + [177.1, 83.4], + [181.6, 75.5], + [176.5, 73.0], + [175.0, 70.2], + [174.0, 73.4], + [165.1, 70.5], + [177.0, 68.9], + [192.0, 102.3], + [176.5, 68.4], + [169.4, 65.9], + [182.1, 75.7], + [179.8, 84.5], + [175.3, 87.7], + [184.9, 86.4], + [177.3, 73.2], + [167.4, 53.9], + [178.1, 72.0], + [168.9, 55.5], + [157.2, 58.4], + [180.3, 83.2], + [170.2, 72.7], + [177.8, 64.1], + [172.7, 72.3], + [165.1, 65.0], + [186.7, 86.4], + [165.1, 65.0], + [174.0, 88.6], + [175.3, 84.1], + [185.4, 66.8], + [177.8, 75.5], + [180.3, 93.2], + [180.3, 82.7], + [177.8, 58.0], + [177.8, 79.5], + [177.8, 78.6], + [177.8, 71.8], + [177.8, 116.4], + [163.8, 72.2], + [188.0, 83.6], + [198.1, 85.5], + [175.3, 90.9], + [166.4, 85.9], + [190.5, 89.1], + [166.4, 75.0], + [177.8, 77.7], + [179.7, 86.4], + [172.7, 90.9], + [190.5, 73.6], + [185.4, 76.4], + [168.9, 69.1], + [167.6, 84.5], + [175.3, 64.5], + [170.2, 69.1], + [190.5, 108.6], + [177.8, 86.4], + [190.5, 80.9], + [177.8, 87.7], + [184.2, 94.5], + [176.5, 80.2], + [177.8, 72.0], + [180.3, 71.4], + [171.4, 72.7], + [172.7, 84.1], + [172.7, 76.8], + [177.8, 63.6], + [177.8, 80.9], + [182.9, 80.9], + [170.2, 85.5], + [167.6, 68.6], + [175.3, 67.7], + [165.1, 66.4], + [185.4, 102.3], + [181.6, 70.5], + [172.7, 95.9], + [190.5, 84.1], + [179.1, 87.3], + [175.3, 71.8], + [170.2, 65.9], + [193.0, 95.9], + [171.4, 91.4], + [177.8, 81.8], + [177.8, 96.8], + [167.6, 69.1], + [167.6, 82.7], + [180.3, 75.5], + [182.9, 79.5], + [176.5, 73.6], + [186.7, 91.8], + [188.0, 84.1], + [188.0, 85.9], + [177.8, 81.8], + [174.0, 82.5], + [177.8, 80.5], + [171.4, 70.0], + [185.4, 81.8], + [185.4, 84.1], + [188.0, 90.5], + [188.0, 91.4], + [182.9, 89.1], + [176.5, 85.0], + [175.3, 69.1], + [175.3, 73.6], + [188.0, 80.5], + [188.0, 82.7], + [175.3, 86.4], + [170.5, 67.7], + [179.1, 92.7], + [177.8, 93.6], + [175.3, 70.9], + [182.9, 75.0], + [170.8, 93.2], + [188.0, 93.2], + [180.3, 77.7], + [177.8, 61.4], + [185.4, 94.1], + [168.9, 75.0], + [185.4, 83.6], + [180.3, 85.5], + [174.0, 73.9], + [167.6, 66.8], + [182.9, 87.3], + [160.0, 72.3], + [180.3, 88.6], + [167.6, 75.5], + [186.7, 101.4], + [175.3, 91.1], + [175.3, 67.3], + [175.9, 77.7], + [175.3, 81.8], + [179.1, 75.5], + [181.6, 84.5], + [177.8, 76.6], + [182.9, 85.0], + [177.8, 102.5], + [184.2, 77.3], + [179.1, 71.8], + [176.5, 87.9], + [188.0, 94.3], + [174.0, 70.9], + [167.6, 64.5], + [170.2, 77.3], + [167.6, 72.3], + [188.0, 87.3], + [174.0, 80.0], + [176.5, 82.3], + [180.3, 73.6], + [167.6, 74.1], + [188.0, 85.9], + [180.3, 73.2], + [167.6, 76.3], + [183.0, 65.9], + [183.0, 90.9], + [179.1, 89.1], + [170.2, 62.3], + [177.8, 82.7], + [179.1, 79.1], + [190.5, 98.2], + [177.8, 84.1], + [180.3, 83.2], + [180.3, 83.2], + ], + }, + ], + }); +}; + +drawScatterPlotHC(); + export { BASE_URL, QUERY_PARAMS_COMBINED, -- GitLab From 9d7ed9e2379be77bb6f292b572382c37fbd3e34e Mon Sep 17 00:00:00 2001 From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de> Date: Tue, 24 Aug 2021 13:23:48 +0200 Subject: [PATCH 3/4] Edit function: draw scatter plot Add a blank line between the properties of the options object, in an attempt at improving readability. Initial approach at generalizing the function by extracting constants from the options object of the scatter plot chart. --- public/js/appChart.js | 795 +++++++++++++++--------------------------- 1 file changed, 273 insertions(+), 522 deletions(-) diff --git a/public/js/appChart.js b/public/js/appChart.js index 4fb361e..3afec14 100644 --- a/public/js/appChart.js +++ b/public/js/appChart.js @@ -574,31 +574,288 @@ const observationsPromisesRLArr = datastreamsUrlRLArr.map((obsUrl) => // ); 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 + 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 + const SERIES_2_SYMBOL = "kW"; + Highcharts.chart("chart-scatter-plot", { chart: { type: "scatter", zoomType: "xy", }, + title: { - text: "Height Versus Weight of 507 Individuals by Gender", + text: CHART_TITLE, }, + subtitle: { - text: "Source: Heinz 2003", + text: CHART_SUBTITLE, }, + xAxis: { title: { enabled: true, - text: "Height (cm)", + text: X_AXIS_TITLE, }, + type: "datetime", startOnTick: true, endOnTick: true, showLastLabel: true, }, - yAxis: { - title: { - text: "Weight (kg)", + + 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", @@ -609,6 +866,7 @@ const drawScatterPlotHC = function () { backgroundColor: Highcharts.defaultOptions.chart.backgroundColor, borderWidth: 1, }, + plotOptions: { scatter: { marker: { @@ -633,525 +891,18 @@ const drawScatterPlotHC = function () { }, }, }, + series: [ { - name: "Female", - color: "rgba(223, 83, 83, .5)", - data: [ - [161.2, 51.6], - [167.5, 59.0], - [159.5, 49.2], - [157.0, 63.0], - [155.8, 53.6], - [170.0, 59.0], - [159.1, 47.6], - [166.0, 69.8], - [176.2, 66.8], - [160.2, 75.2], - [172.5, 55.2], - [170.9, 54.2], - [172.9, 62.5], - [153.4, 42.0], - [160.0, 50.0], - [147.2, 49.8], - [168.2, 49.2], - [175.0, 73.2], - [157.0, 47.8], - [167.6, 68.8], - [159.5, 50.6], - [175.0, 82.5], - [166.8, 57.2], - [176.5, 87.8], - [170.2, 72.8], - [174.0, 54.5], - [173.0, 59.8], - [179.9, 67.3], - [170.5, 67.8], - [160.0, 47.0], - [154.4, 46.2], - [162.0, 55.0], - [176.5, 83.0], - [160.0, 54.4], - [152.0, 45.8], - [162.1, 53.6], - [170.0, 73.2], - [160.2, 52.1], - [161.3, 67.9], - [166.4, 56.6], - [168.9, 62.3], - [163.8, 58.5], - [167.6, 54.5], - [160.0, 50.2], - [161.3, 60.3], - [167.6, 58.3], - [165.1, 56.2], - [160.0, 50.2], - [170.0, 72.9], - [157.5, 59.8], - [167.6, 61.0], - [160.7, 69.1], - [163.2, 55.9], - [152.4, 46.5], - [157.5, 54.3], - [168.3, 54.8], - [180.3, 60.7], - [165.5, 60.0], - [165.0, 62.0], - [164.5, 60.3], - [156.0, 52.7], - [160.0, 74.3], - [163.0, 62.0], - [165.7, 73.1], - [161.0, 80.0], - [162.0, 54.7], - [166.0, 53.2], - [174.0, 75.7], - [172.7, 61.1], - [167.6, 55.7], - [151.1, 48.7], - [164.5, 52.3], - [163.5, 50.0], - [152.0, 59.3], - [169.0, 62.5], - [164.0, 55.7], - [161.2, 54.8], - [155.0, 45.9], - [170.0, 70.6], - [176.2, 67.2], - [170.0, 69.4], - [162.5, 58.2], - [170.3, 64.8], - [164.1, 71.6], - [169.5, 52.8], - [163.2, 59.8], - [154.5, 49.0], - [159.8, 50.0], - [173.2, 69.2], - [170.0, 55.9], - [161.4, 63.4], - [169.0, 58.2], - [166.2, 58.6], - [159.4, 45.7], - [162.5, 52.2], - [159.0, 48.6], - [162.8, 57.8], - [159.0, 55.6], - [179.8, 66.8], - [162.9, 59.4], - [161.0, 53.6], - [151.1, 73.2], - [168.2, 53.4], - [168.9, 69.0], - [173.2, 58.4], - [171.8, 56.2], - [178.0, 70.6], - [164.3, 59.8], - [163.0, 72.0], - [168.5, 65.2], - [166.8, 56.6], - [172.7, 105.2], - [163.5, 51.8], - [169.4, 63.4], - [167.8, 59.0], - [159.5, 47.6], - [167.6, 63.0], - [161.2, 55.2], - [160.0, 45.0], - [163.2, 54.0], - [162.2, 50.2], - [161.3, 60.2], - [149.5, 44.8], - [157.5, 58.8], - [163.2, 56.4], - [172.7, 62.0], - [155.0, 49.2], - [156.5, 67.2], - [164.0, 53.8], - [160.9, 54.4], - [162.8, 58.0], - [167.0, 59.8], - [160.0, 54.8], - [160.0, 43.2], - [168.9, 60.5], - [158.2, 46.4], - [156.0, 64.4], - [160.0, 48.8], - [167.1, 62.2], - [158.0, 55.5], - [167.6, 57.8], - [156.0, 54.6], - [162.1, 59.2], - [173.4, 52.7], - [159.8, 53.2], - [170.5, 64.5], - [159.2, 51.8], - [157.5, 56.0], - [161.3, 63.6], - [162.6, 63.2], - [160.0, 59.5], - [168.9, 56.8], - [165.1, 64.1], - [162.6, 50.0], - [165.1, 72.3], - [166.4, 55.0], - [160.0, 55.9], - [152.4, 60.4], - [170.2, 69.1], - [162.6, 84.5], - [170.2, 55.9], - [158.8, 55.5], - [172.7, 69.5], - [167.6, 76.4], - [162.6, 61.4], - [167.6, 65.9], - [156.2, 58.6], - [175.2, 66.8], - [172.1, 56.6], - [162.6, 58.6], - [160.0, 55.9], - [165.1, 59.1], - [182.9, 81.8], - [166.4, 70.7], - [165.1, 56.8], - [177.8, 60.0], - [165.1, 58.2], - [175.3, 72.7], - [154.9, 54.1], - [158.8, 49.1], - [172.7, 75.9], - [168.9, 55.0], - [161.3, 57.3], - [167.6, 55.0], - [165.1, 65.5], - [175.3, 65.5], - [157.5, 48.6], - [163.8, 58.6], - [167.6, 63.6], - [165.1, 55.2], - [165.1, 62.7], - [168.9, 56.6], - [162.6, 53.9], - [164.5, 63.2], - [176.5, 73.6], - [168.9, 62.0], - [175.3, 63.6], - [159.4, 53.2], - [160.0, 53.4], - [170.2, 55.0], - [162.6, 70.5], - [167.6, 54.5], - [162.6, 54.5], - [160.7, 55.9], - [160.0, 59.0], - [157.5, 63.6], - [162.6, 54.5], - [152.4, 47.3], - [170.2, 67.7], - [165.1, 80.9], - [172.7, 70.5], - [165.1, 60.9], - [170.2, 63.6], - [170.2, 54.5], - [170.2, 59.1], - [161.3, 70.5], - [167.6, 52.7], - [167.6, 62.7], - [165.1, 86.3], - [162.6, 66.4], - [152.4, 67.3], - [168.9, 63.0], - [170.2, 73.6], - [175.2, 62.3], - [175.2, 57.7], - [160.0, 55.4], - [165.1, 104.1], - [174.0, 55.5], - [170.2, 77.3], - [160.0, 80.5], - [167.6, 64.5], - [167.6, 72.3], - [167.6, 61.4], - [154.9, 58.2], - [162.6, 81.8], - [175.3, 63.6], - [171.4, 53.4], - [157.5, 54.5], - [165.1, 53.6], - [160.0, 60.0], - [174.0, 73.6], - [162.6, 61.4], - [174.0, 55.5], - [162.6, 63.6], - [161.3, 60.9], - [156.2, 60.0], - [149.9, 46.8], - [169.5, 57.3], - [160.0, 64.1], - [175.3, 63.6], - [169.5, 67.3], - [160.0, 75.5], - [172.7, 68.2], - [162.6, 61.4], - [157.5, 76.8], - [176.5, 71.8], - [164.4, 55.5], - [160.7, 48.6], - [174.0, 66.4], - [163.8, 67.3], - ], + name: SERIES_1_NAME, + color: SERIES_1_SYMBOL_COLOR, + data: ruecklaufArr, + yAxis: 1, // need this property for the dual y-axes }, { - name: "Male", - color: "rgba(119, 152, 191, .5)", - data: [ - [174.0, 65.6], - [175.3, 71.8], - [193.5, 80.7], - [186.5, 72.6], - [187.2, 78.8], - [181.5, 74.8], - [184.0, 86.4], - [184.5, 78.4], - [175.0, 62.0], - [184.0, 81.6], - [180.0, 76.6], - [177.8, 83.6], - [192.0, 90.0], - [176.0, 74.6], - [174.0, 71.0], - [184.0, 79.6], - [192.7, 93.8], - [171.5, 70.0], - [173.0, 72.4], - [176.0, 85.9], - [176.0, 78.8], - [180.5, 77.8], - [172.7, 66.2], - [176.0, 86.4], - [173.5, 81.8], - [178.0, 89.6], - [180.3, 82.8], - [180.3, 76.4], - [164.5, 63.2], - [173.0, 60.9], - [183.5, 74.8], - [175.5, 70.0], - [188.0, 72.4], - [189.2, 84.1], - [172.8, 69.1], - [170.0, 59.5], - [182.0, 67.2], - [170.0, 61.3], - [177.8, 68.6], - [184.2, 80.1], - [186.7, 87.8], - [171.4, 84.7], - [172.7, 73.4], - [175.3, 72.1], - [180.3, 82.6], - [182.9, 88.7], - [188.0, 84.1], - [177.2, 94.1], - [172.1, 74.9], - [167.0, 59.1], - [169.5, 75.6], - [174.0, 86.2], - [172.7, 75.3], - [182.2, 87.1], - [164.1, 55.2], - [163.0, 57.0], - [171.5, 61.4], - [184.2, 76.8], - [174.0, 86.8], - [174.0, 72.2], - [177.0, 71.6], - [186.0, 84.8], - [167.0, 68.2], - [171.8, 66.1], - [182.0, 72.0], - [167.0, 64.6], - [177.8, 74.8], - [164.5, 70.0], - [192.0, 101.6], - [175.5, 63.2], - [171.2, 79.1], - [181.6, 78.9], - [167.4, 67.7], - [181.1, 66.0], - [177.0, 68.2], - [174.5, 63.9], - [177.5, 72.0], - [170.5, 56.8], - [182.4, 74.5], - [197.1, 90.9], - [180.1, 93.0], - [175.5, 80.9], - [180.6, 72.7], - [184.4, 68.0], - [175.5, 70.9], - [180.6, 72.5], - [177.0, 72.5], - [177.1, 83.4], - [181.6, 75.5], - [176.5, 73.0], - [175.0, 70.2], - [174.0, 73.4], - [165.1, 70.5], - [177.0, 68.9], - [192.0, 102.3], - [176.5, 68.4], - [169.4, 65.9], - [182.1, 75.7], - [179.8, 84.5], - [175.3, 87.7], - [184.9, 86.4], - [177.3, 73.2], - [167.4, 53.9], - [178.1, 72.0], - [168.9, 55.5], - [157.2, 58.4], - [180.3, 83.2], - [170.2, 72.7], - [177.8, 64.1], - [172.7, 72.3], - [165.1, 65.0], - [186.7, 86.4], - [165.1, 65.0], - [174.0, 88.6], - [175.3, 84.1], - [185.4, 66.8], - [177.8, 75.5], - [180.3, 93.2], - [180.3, 82.7], - [177.8, 58.0], - [177.8, 79.5], - [177.8, 78.6], - [177.8, 71.8], - [177.8, 116.4], - [163.8, 72.2], - [188.0, 83.6], - [198.1, 85.5], - [175.3, 90.9], - [166.4, 85.9], - [190.5, 89.1], - [166.4, 75.0], - [177.8, 77.7], - [179.7, 86.4], - [172.7, 90.9], - [190.5, 73.6], - [185.4, 76.4], - [168.9, 69.1], - [167.6, 84.5], - [175.3, 64.5], - [170.2, 69.1], - [190.5, 108.6], - [177.8, 86.4], - [190.5, 80.9], - [177.8, 87.7], - [184.2, 94.5], - [176.5, 80.2], - [177.8, 72.0], - [180.3, 71.4], - [171.4, 72.7], - [172.7, 84.1], - [172.7, 76.8], - [177.8, 63.6], - [177.8, 80.9], - [182.9, 80.9], - [170.2, 85.5], - [167.6, 68.6], - [175.3, 67.7], - [165.1, 66.4], - [185.4, 102.3], - [181.6, 70.5], - [172.7, 95.9], - [190.5, 84.1], - [179.1, 87.3], - [175.3, 71.8], - [170.2, 65.9], - [193.0, 95.9], - [171.4, 91.4], - [177.8, 81.8], - [177.8, 96.8], - [167.6, 69.1], - [167.6, 82.7], - [180.3, 75.5], - [182.9, 79.5], - [176.5, 73.6], - [186.7, 91.8], - [188.0, 84.1], - [188.0, 85.9], - [177.8, 81.8], - [174.0, 82.5], - [177.8, 80.5], - [171.4, 70.0], - [185.4, 81.8], - [185.4, 84.1], - [188.0, 90.5], - [188.0, 91.4], - [182.9, 89.1], - [176.5, 85.0], - [175.3, 69.1], - [175.3, 73.6], - [188.0, 80.5], - [188.0, 82.7], - [175.3, 86.4], - [170.5, 67.7], - [179.1, 92.7], - [177.8, 93.6], - [175.3, 70.9], - [182.9, 75.0], - [170.8, 93.2], - [188.0, 93.2], - [180.3, 77.7], - [177.8, 61.4], - [185.4, 94.1], - [168.9, 75.0], - [185.4, 83.6], - [180.3, 85.5], - [174.0, 73.9], - [167.6, 66.8], - [182.9, 87.3], - [160.0, 72.3], - [180.3, 88.6], - [167.6, 75.5], - [186.7, 101.4], - [175.3, 91.1], - [175.3, 67.3], - [175.9, 77.7], - [175.3, 81.8], - [179.1, 75.5], - [181.6, 84.5], - [177.8, 76.6], - [182.9, 85.0], - [177.8, 102.5], - [184.2, 77.3], - [179.1, 71.8], - [176.5, 87.9], - [188.0, 94.3], - [174.0, 70.9], - [167.6, 64.5], - [170.2, 77.3], - [167.6, 72.3], - [188.0, 87.3], - [174.0, 80.0], - [176.5, 82.3], - [180.3, 73.6], - [167.6, 74.1], - [188.0, 85.9], - [180.3, 73.2], - [167.6, 76.3], - [183.0, 65.9], - [183.0, 90.9], - [179.1, 89.1], - [170.2, 62.3], - [177.8, 82.7], - [179.1, 79.1], - [190.5, 98.2], - [177.8, 84.1], - [180.3, 83.2], - [180.3, 83.2], - ], + name: SERIES_2_NAME, + color: SERIES_2_SYMBOL_COLOR, + data: powerArr, }, ], }); -- GitLab From 2005064b4121271d38fbc6d850014d2fa5c97d0e Mon Sep 17 00:00:00 2001 From: Pithon Kabiro <pithon.kabiro@hft-stuttgart.de> Date: Tue, 24 Aug 2021 13:32:52 +0200 Subject: [PATCH 4/4] Edit tooltip for scatter plot --- public/js/appChart.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/public/js/appChart.js b/public/js/appChart.js index 3afec14..2cb42c7 100644 --- a/public/js/appChart.js +++ b/public/js/appChart.js @@ -789,12 +789,12 @@ const drawScatterPlotHC = function () { 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 + 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 + 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", { @@ -886,8 +886,9 @@ const drawScatterPlotHC = function () { }, }, tooltip: { - headerFormat: "<b>{series.name}</b><br>", + headerFormat: "{point.x:%e %b, %Y %H:%M:%S}: <b>{point.y}</b>", pointFormat: "{point.x} cm, {point.y} kg", + valueDecimals: 2, }, }, }, @@ -897,12 +898,20 @@ const drawScatterPlotHC = function () { name: SERIES_1_NAME, color: SERIES_1_SYMBOL_COLOR, data: ruecklaufArr, - yAxis: 1, // need this property for the dual y-axes + 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}`, + }, }, ], }); -- GitLab