Skip to content
GitLab
Commit ecf71f6c authored by Sven Schneider's avatar Sven Schneider
Browse files

implemented boxplot and linechart from plotly.

parent a9c9ba16
newLineChart
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 340 additions and 31 deletions
+340 -31
index.html
+ 45
- 0
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
+ 3
- 1
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
+ 292
- 30
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
Supports Markdown
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