From ecf71f6c459f5000d8ad60c865ef98e64030d620 Mon Sep 17 00:00:00 2001
From: Sven Schneider <icedoggy@gmx.de>
Date: Fri, 21 May 2021 14:35:52 +0200
Subject: [PATCH] implemented boxplot and linechart from plotly.
---
index.html | 45 +++++
public/js/appChart.js | 4 +-
public/js/createPlotlyPlots.js | 322 ++++++++++++++++++++++++++++++---
3 files changed, 340 insertions(+), 31 deletions(-)
diff --git a/index.html b/index.html
index d0bbf38..e2761fa 100644
--- a/index.html
+++ b/index.html
@@ -136,6 +136,8 @@
</div>
</div>
+ <!-- end row -->
+
<div class="row">
<div class="col-xl-6">
<div class="card mb-4">
@@ -174,6 +176,49 @@
</div>
<!-- end row -->
+
+ <div class="row">
+ <div class="col-xl-6">
+ <div class="card mb-4">
+ <div class="card-header">
+ <i class="fas fa-chart-area mr-1"></i>
+ Boxplot plotly
+ </div>
+ <div class="card-body">
+ <div
+ id="BoxplotPlotly"
+ width="100%"
+ height="40"
+ >
+ <!-- Plotly chart will be drawn inside this DIV -->
+ </div>
+
+ </div>
+ </div>
+ </div>
+
+ <div class="col-xl-6">
+ <div class="card mb-4">
+ <div class="card-header">
+ <i class="fas fa-chart-area mr-1"></i>
+ Lineplot Plotly
+ </div>
+ <div class="card-body">
+ <div
+ id="LineplotPlotly"
+ width="100%"
+ height="40"
+ >
+ <!-- Plotly chart will be drawn inside this DIV -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+ <!-- end row -->
+
<div class="row">
<div class="col-xl-12">
<div class="card mb-4">
diff --git a/public/js/appChart.js b/public/js/appChart.js
index e24a3dc..83f128d 100644
--- a/public/js/appChart.js
+++ b/public/js/appChart.js
@@ -438,7 +438,7 @@ followNextLink(
})
.then((observationArr) => {
// updateLineChartAC(chart1LineTitle, observationArr);
- drawHeatMapAC2(observationArr);
+ // drawHeatMapAC2(observationArr);
///////////// use chart.js for line chart
///// check this out : https://stackoverflow.com/questions/57343566/zoom-function-for-chart-js
@@ -589,6 +589,8 @@ followNextLink(
loadJS('js/createPlotlyPlots.js', makeRibbonPlot(jsonFromArr2), document.body);
makeHeatmap(jsonFromArr2);
+ makeBoxplot(jsonFromArr2);
+ makeLinePlot(jsonFromArr2);
///////////////////////////////////////
diff --git a/public/js/createPlotlyPlots.js b/public/js/createPlotlyPlots.js
index bb8a264..f392370 100644
--- a/public/js/createPlotlyPlots.js
+++ b/public/js/createPlotlyPlots.js
@@ -155,9 +155,8 @@ function prepHeatmapData(jsonData) {
var breakOut = false;
for (var hour = 0; hour < z.length; hour++) {
for (var day = 0; day < incr; day++) {
- idx = (day * maxH) + hour ;
- if (idx >= L)
- continue;
+ idx = day * maxH + hour;
+ if (idx >= L) continue;
z[hour][day] = jsonData[idx].y;
cnt++;
if (cnt >= L) {
@@ -165,8 +164,7 @@ function prepHeatmapData(jsonData) {
break;
}
}
- if (breakOut)
- break;
+ if (breakOut) break;
}
// window.alert(cnt);
@@ -179,54 +177,70 @@ function prepHeatmapData(jsonData) {
function makeHeatmap(dat) {
z_data = prepHeatmapData(dat);
- layout = { // all "layout" attributes: #layout
- title: 'Inlet flow Overview of 2020 - 1st Jan - 30th Jun', // more about "layout.title": #layout-title
+ layout = {
+ // all "layout" attributes: #layout
+ title: "Inlet flow Overview of 2020 - 1st Jan - 30th Jun", // more about "layout.title": #layout-title
showlegend: true,
autosize: true,
width: 1400,
height: 800,
- xaxis: { // all "layout.xaxis" attributes: #layout-xaxis
- title: 'Number of the day of the year',
- tickmode: "array",
- tickvals: [0 , 31, 60, 91, 121, 152, 182],
- ticktext: ["1st. Jan", "1st Feb", "1st Mar", "1st Apr", "1st May", "1st Jun", "1st Jul"], // more about "layout.xaxis.title": #layout-xaxis-title
+ xaxis: {
+ // all "layout.xaxis" attributes: #layout-xaxis
+ title: "Number of the day of the year",
+ tickmode: "array",
+ tickvals: [0, 31, 60, 91, 121, 152, 182],
+ ticktext: [
+ "1st. Jan",
+ "1st Feb",
+ "1st Mar",
+ "1st Apr",
+ "1st May",
+ "1st Jun",
+ "1st Jul",
+ ], // more about "layout.xaxis.title": #layout-xaxis-title
},
- yaxis: {
+ yaxis: {
title: "Hours of the day",
tickmode: "array",
tickvals: [...Array(24).keys()],
ticktext: String([...Array(24).keys()]),
+ },
- },
-
- annotations: [ // all "annotation" attributes: #layout-annotations
- // {
- // text: '1st of February', // #layout-annotations-text
- // x: 0, // #layout-annotations-x
- // xref: 'paper', // #layout-annotations-xref
- // y: 0, // #layout-annotations-y
- // yref: 'paper' // #layout-annotations-yref
- // }
- ]
-}
+ annotations: [
+ // all "annotation" attributes: #layout-annotations
+ // {
+ // text: '1st of February', // #layout-annotations-text
+ // x: 0, // #layout-annotations-x
+ // xref: 'paper', // #layout-annotations-xref
+ // y: 0, // #layout-annotations-y
+ // yref: 'paper' // #layout-annotations-yref
+ // }
+ ],
+ };
var data = [
{
- // z: [ [1, 20, 30 , 20], [20, 1, 60, 10 ], [30, 60, 1, 5], [1, 20, 30 , 20], [20, 1, 60, 10 ], [30, 60, 1, 5] ],
+
z: z_data,
type: "heatmap",
+ colorscale: 'Portland',
+ zsmooth: 'none', // fast // best // none
+ colorbar: {
+ title: {
+ text: "Temperature (°C)",
+ side: "top"
+ }
+ }
},
];
Plotly.newPlot("heatmap2d", data, layout);
}
+//////////////////////////////
+
function make2dHistogram(dat) {
- //////////////////////////////
// make heatmap or 2d histogram plot
-
-
-
var x = [];
var y = [];
for (var i = 0; i < 500; i++) {
@@ -244,3 +258,251 @@ function make2dHistogram(dat) {
];
Plotly.newPlot("heatmap2d", data);
}
+
+//////////////////////////////////////////////////////////////////
+//////////////////////////////////////////////////////////
+
+function prepBoxplotData(jsonData) {
+ var resList = [];
+ const L = jsonData.length;
+ var currentMonth = 0;
+
+ var x = [];
+ var y = [];
+
+ for (var d = 0; d < L; d++) {
+ let tmpDate = new Date(jsonData[d].x);
+ // let datum = tmpDate.getDate(); // gets the day of the month 1...31
+
+ let month = tmpDate.getUTCMonth(); // gets the month as numeric value
+
+ if (currentMonth == month) {
+ y.push(jsonData[d].y);
+ x.push(jsonData[d].x);
+ } else {
+ resList.push({ date: x , temperature: y });
+ var x = [];
+ var y = [];
+
+ currentMonth += 1;
+ y.push(jsonData[d].y);
+ x.push(jsonData[d].x);
+ }
+ }
+ return resList;
+}
+
+/////////////////////////////////
+
+function makeBoxplot(dat) {
+ var preppedData = prepBoxplotData(dat);
+
+ var trace1 = {
+ y: preppedData[0].temperature,
+ type: "box",
+ name: "Jan",
+ jitter: 0.3,
+ pointpos: -1.8,
+ marker: {
+ color: "rgba(7,40,89,0.4)",
+ },
+ boxpoints: "all", // suspectedoutliers // Outliers // false // all
+ };
+
+ var trace2 = {
+ y: preppedData[1].temperature,
+ type: "box",
+ name: "Feb",
+ jitter: 0.3,
+ pointpos: -1.8,
+ marker: {
+ color: "rgba(47,40,89 ,0.4)",
+ },
+ boxpoints: "all", // suspectedoutliers // Outliers // false // all
+ };
+
+ var trace3 = {
+ y: preppedData[2].temperature,
+ type: "box",
+ name: "Mar",
+ jitter: 0.3,
+ pointpos: -1.8,
+ marker: {
+ color: "rgba(87,40,89,0.4)",
+ },
+ boxpoints: "all", // suspectedoutliers // Outliers // false // all
+ };
+
+ var trace4 = {
+ y: preppedData[3].temperature,
+ type: "box",
+ name: "Apr",
+ jitter: 0.3,
+ pointpos: -1.8,
+ marker: {
+ color: "rgba(120,40,89,0.4)",
+ },
+ boxpoints: "all", // suspectedoutliers // Outliers // false // all
+ };
+
+ var trace5 = {
+ y: preppedData[4].temperature,
+ type: "box",
+ name: "May",
+ jitter: 0.3,
+ pointpos: -1.8,
+ marker: {
+ color: "rgba(160,40,89,0.4)",
+ },
+ boxpoints: "all", // suspectedoutliers // Outliers // false // all
+ };
+
+ var trace6 = {
+ y: preppedData[5].temperature,
+ type: "box",
+ name: "Jun",
+ jitter: 0.3,
+ pointpos: -1.8,
+ marker: {
+ color: "rgba(200,40,89,0.4)",
+ },
+ boxpoints: "all", // suspectedoutliers // Outliers // false // all
+ };
+
+ var data = [trace1, trace2, trace3, trace4, trace5, trace6];
+
+ var layout = {
+ title: "Inlet flow Overview of 2020 - 1st Jan - 30th Jun", // more about "layout.title": #layout-title
+ showlegend: true,
+ autosize: true,
+ width: 700,
+ height: 500,
+ xaxis: {
+ title: 'Month of the year 2020',
+ zeroline: false
+ },
+ yaxis: {
+ title: 'Temperature (°C)',
+ zeroline: true
+ },
+
+ };
+
+ Plotly.newPlot("BoxplotPlotly", data, layout);
+}
+
+
+///////////////////////////////////////////////////
+
+function makeLinePlot(dat){
+
+ var preppedData = prepBoxplotData(dat);
+
+ trace1 = {
+ type: 'scatter',
+ // x: [1, 2, 3, 4],
+ // y: [10, 15, 13, 17],
+ x: preppedData[0].date,
+ y: preppedData[0].temperature,
+ mode: 'lines',
+ name: 'Jan',
+ line: {
+ color: "rgba(7,40,89,0.4)",
+ width: 2
+ }
+ };
+
+ trace2 = {
+ type: 'scatter',
+ // x: [1, 2, 3, 4],
+ // y: [12, 9, 15, 12],
+ x: preppedData[1].date,
+ y: preppedData[1].temperature,
+ mode: 'lines',
+ name: 'Feb',
+ line: {
+ color: "rgba(47,40,89,0.4)",
+ width: 2
+ }
+ };
+
+ trace3 = {
+ type: 'scatter',
+ // x: [1, 2, 3, 4],
+ // y: [10, 15, 13, 17],
+ x: preppedData[2].date,
+ y: preppedData[2].temperature,
+ mode: 'lines',
+ name: 'Mar',
+ line: {
+ color: "rgba(87,40,89,0.4)",
+ width: 2
+ }
+ };
+
+ trace4 = {
+ type: 'scatter',
+ // x: [1, 2, 3, 4],
+ // y: [12, 9, 15, 12],
+ x: preppedData[3].date,
+ y: preppedData[3].temperature,
+ mode: 'lines',
+ name: 'Apr',
+ line: {
+ color: "rgba(127,40,89,0.4)",
+ width: 2
+ }
+ };
+
+ trace5 = {
+ type: 'scatter',
+ // x: [1, 2, 3, 4],
+ // y: [10, 15, 13, 17],
+ x: preppedData[4].date,
+ y: preppedData[4].temperature,
+ mode: 'lines',
+ name: 'May',
+ line: {
+ color: "rgba(167,40,89,0.4)",
+ width: 2
+ }
+ };
+
+ trace6 = {
+ type: 'scatter',
+ // x: [1, 2, 3, 4],
+ // y: [12, 9, 15, 12],
+ x: preppedData[5].date,
+ y: preppedData[5].temperature,
+ mode: 'lines',
+ name: 'Jun',
+ line: {
+ color: "rgba(207,40,89,0.4)",
+ width: 2
+ }
+ };
+
+
+
+ var layout = {
+ title: "Inlet flow Overview of 2020 - 1st Jan - 30th Jun", // more about "layout.title": #layout-title
+ showlegend: true,
+ autosize: true,
+ width: 700,
+ height: 500,
+ xaxis: {
+ title: 'Month of the year 2020',
+ zeroline: false
+ },
+ yaxis: {
+ title: 'Temperature (°C)',
+ zeroline: true
+ },
+
+ };
+
+ var data = [trace1, trace2, trace3,trace4, trace5, trace6];
+
+ Plotly.newPlot('LineplotPlotly', data, layout);
+
+}
\ No newline at end of file
--
GitLab