Skip to content

GitLab

Commit ecf71f6c authored by Sven Schneider's avatar Sven Schneider
Browse files

implemented boxplot and linechart from plotly.

parent a9c9ba16
Hide whitespace changes
Inline Side-by-side
index.html
View file @ ecf71f6c
...@@ -136,6 +136,8 @@ ...@@ -136,6 +136,8 @@
</div> </div>
</div> </div>
<!-- end row -->
<div class="row"> <div class="row">
<div class="col-xl-6"> <div class="col-xl-6">
<div class="card mb-4"> <div class="card mb-4">
...@@ -174,6 +176,49 @@ ...@@ -174,6 +176,49 @@
</div> </div>
<!-- end row --> <!-- 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="row">
<div class="col-xl-12"> <div class="col-xl-12">
<div class="card mb-4"> <div class="card mb-4">
......
public/js/appChart.js
View file @ ecf71f6c
...@@ -438,7 +438,7 @@ followNextLink( ...@@ -438,7 +438,7 @@ followNextLink(
}) })
.then((observationArr) => { .then((observationArr) => {
// updateLineChartAC(chart1LineTitle, observationArr); // updateLineChartAC(chart1LineTitle, observationArr);
drawHeatMapAC2(observationArr); // drawHeatMapAC2(observationArr);
///////////// use chart.js for line chart ///////////// use chart.js for line chart
///// check this out : https://stackoverflow.com/questions/57343566/zoom-function-for-chart-js ///// check this out : https://stackoverflow.com/questions/57343566/zoom-function-for-chart-js
...@@ -589,6 +589,8 @@ followNextLink( ...@@ -589,6 +589,8 @@ followNextLink(
loadJS('js/createPlotlyPlots.js', makeRibbonPlot(jsonFromArr2), document.body); loadJS('js/createPlotlyPlots.js', makeRibbonPlot(jsonFromArr2), document.body);
makeHeatmap(jsonFromArr2); makeHeatmap(jsonFromArr2);
makeBoxplot(jsonFromArr2);
makeLinePlot(jsonFromArr2);
/////////////////////////////////////// ///////////////////////////////////////
......
public/js/createPlotlyPlots.js
View file @ ecf71f6c
...@@ -155,9 +155,8 @@ function prepHeatmapData(jsonData) { ...@@ -155,9 +155,8 @@ function prepHeatmapData(jsonData) {
var breakOut = false; var breakOut = false;
for (var hour = 0; hour < z.length; hour++) { for (var hour = 0; hour < z.length; hour++) {
for (var day = 0; day < incr; day++) { for (var day = 0; day < incr; day++) {
idx = (day * maxH) + hour ; idx = day * maxH + hour;
if (idx >= L) if (idx >= L) continue;
continue;
z[hour][day] = jsonData[idx].y; z[hour][day] = jsonData[idx].y;
cnt++; cnt++;
if (cnt >= L) { if (cnt >= L) {
...@@ -165,8 +164,7 @@ function prepHeatmapData(jsonData) { ...@@ -165,8 +164,7 @@ function prepHeatmapData(jsonData) {
break; break;
} }
} }
if (breakOut) if (breakOut) break;
break;
} }
// window.alert(cnt); // window.alert(cnt);
...@@ -179,54 +177,70 @@ function prepHeatmapData(jsonData) { ...@@ -179,54 +177,70 @@ function prepHeatmapData(jsonData) {
function makeHeatmap(dat) { function makeHeatmap(dat) {
z_data = prepHeatmapData(dat); z_data = prepHeatmapData(dat);
layout = { // all "layout" attributes: #layout layout = {
title: 'Inlet flow Overview of 2020 - 1st Jan - 30th Jun', // more about "layout.title": #layout-title // all "layout" attributes: #layout
title: "Inlet flow Overview of 2020 - 1st Jan - 30th Jun", // more about "layout.title": #layout-title
showlegend: true, showlegend: true,
autosize: true, autosize: true,
width: 1400, width: 1400,
height: 800, height: 800,
xaxis: { // all "layout.xaxis" attributes: #layout-xaxis xaxis: {
title: 'Number of the day of the year', // all "layout.xaxis" attributes: #layout-xaxis
tickmode: "array", title: "Number of the day of the year",
tickvals: [0 , 31, 60, 91, 121, 152, 182], tickmode: "array",
ticktext: ["1st. Jan", "1st Feb", "1st Mar", "1st Apr", "1st May", "1st Jun", "1st Jul"], // more about "layout.xaxis.title": #layout-xaxis-title 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", title: "Hours of the day",
tickmode: "array", tickmode: "array",
tickvals: [...Array(24).keys()], tickvals: [...Array(24).keys()],
ticktext: String([...Array(24).keys()]), ticktext: String([...Array(24).keys()]),
},
}, annotations: [
// all "annotation" attributes: #layout-annotations
annotations: [ // all "annotation" attributes: #layout-annotations // {
// { // text: '1st of February', // #layout-annotations-text
// text: '1st of February', // #layout-annotations-text // x: 0, // #layout-annotations-x
// x: 0, // #layout-annotations-x // xref: 'paper', // #layout-annotations-xref
// xref: 'paper', // #layout-annotations-xref // y: 0, // #layout-annotations-y
// y: 0, // #layout-annotations-y // yref: 'paper' // #layout-annotations-yref
// yref: 'paper' // #layout-annotations-yref // }
// } ],
] };
}
var data = [ 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, z: z_data,
type: "heatmap", type: "heatmap",
colorscale: 'Portland',
zsmooth: 'none', // fast // best // none
colorbar: {
title: {
text: "Temperature (°C)",
side: "top"
}
}
}, },
]; ];
Plotly.newPlot("heatmap2d", data, layout); Plotly.newPlot("heatmap2d", data, layout);
} }
//////////////////////////////
function make2dHistogram(dat) { function make2dHistogram(dat) {
//////////////////////////////
// make heatmap or 2d histogram plot // make heatmap or 2d histogram plot
var x = []; var x = [];
var y = []; var y = [];
for (var i = 0; i < 500; i++) { for (var i = 0; i < 500; i++) {
...@@ -244,3 +258,251 @@ function make2dHistogram(dat) { ...@@ -244,3 +258,251 @@ function make2dHistogram(dat) {
]; ];
Plotly.newPlot("heatmap2d", data); 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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal