max/icl-iot-weather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Max 2020-10-21 09:40:16 +01:00
parent 56e39fc47d
commit 406ee88938
2 changed files with 78 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
site/views/index.ejs
View File

@ -8,9 +8,11 @@
<link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
</head> </head>
<body> <body>
<div id="chart" style="width: 50%;"></div> <div id="temp_chart"></div>
<div id="chart_2"></div> <div id="humidity_chart"></div>
<div id="wind_chart"></div>
<div id="rain_chart"></div>
<div id="cloud_chart"></div>
<script defer src="js/main.js"></script> <script defer src="js/main.js"></script>
<script src="js/fInit.js"></script> <script src="js/fInit.js"></script>
</body> </body>

114
site/views/js/main.js
View File

@ -29,67 +29,71 @@ async function get_all_data() {
console.log("Added all data..."); console.log("Added all data...");
} }
function createGraph() { function draw_graph(ySeries, names, colors, div_name) {
var trace1 = { var trace = {
type: 'line', type: 'line',
y: temperatures, y: ySeries,
x: formatted_datetimes, x: formatted_datetimes,
text: "trace.text variable", text: names.title,
marker: { marker: { color: colors.trace, line: { width: 5 } }
color: '#00FFFF',
line: {
width: 5
}
}
} }
var data = [trace1] var data = [trace]
var layout = { var layout = {
title: 'Air temperature', font: { size: 15, color: '#AAAAAA' },
font: { size: 18, color: '#AAAAAA' },
paper_bgcolor: '#111111', paper_bgcolor: '#111111',
plot_bgcolor: '#111111', plot_bgcolor: '#111111',
title: { title: { text: names.title, font: { color: '#FFFFFF' } },
text: "Air tempereature", xaxis: { title: { text: 'Date', font: { color: '#FFFFFF' } } },
font: { yaxis: { title: { text: names.yaxis, font: { color: '#FFFFFF' } } }
color: '#FFFFFF'
},
},
xaxis: {
title: {
text: 'Date',
font: {
color: '#FFFFFF'
}
}
},
yaxis: {
title: {
text: 'Temperature in ºC',
font: {
color: '#FFFFFF'
}
}
}
} }
var config = { responsive: true, scrollZoom: true, displaylogo: false} var config = { responsive: true, scrollZoom: false, displaylogo: false }
Plotly.newPlot('chart', data, layout, config) Plotly.newPlot(div_name, data, layout, config)
} }
async function plot_graphs() { async function plot_graphs() {
await get_all_data() await get_all_data()
console.log("Starting data plot..."); console.log("Starting data plot...");
createGraph() draw_graph(
// createGraph_2(); temperatures,
{title: "Air Temperature",yaxis: "Temperature in ºC"},
{trace: '#00FFFF'},
'temp_chart'
)
draw_graph(
humidities,
{title: "Humidity",yaxis: "Air humidity in %"},
{trace: '#00AAFF'},
'humidity_chart'
)
draw_graph(
winds,
{title: "Wind speed",yaxis: "Wind speed in m/s"},
{trace: '#AAFFAA'},
'wind_chart'
)
draw_graph(
precipitations,
{title: "Precipitation",yaxis: "Rainfall in mm"},
{trace: '#FF3333'},
'rain_chart'
)
draw_graph(
clouds,
{title: "Cloudiness",yaxis: "Cloud coverage in %"},
{trace: '#FFFFFF'},
'cloud_chart'
)
} }
function createGraph_2() { function createGraph_2() {
console.log(temperatures); console.log(temperatures);
var data = [ {type: "line", x: formatted_datetimes, y: temperatures} ] var data = [{ type: "line", x: formatted_datetimes, y: temperatures }]
var layout = {title: 'Graph 2', font: { size: 18 }} var layout = { title: 'Graph 2', font: { size: 18 } }
var config = { responsive: true } var config = { responsive: true }
Plotly.newPlot('chart_2', data, layout, config) Plotly.newPlot('chart_2', data, layout, config)
@ -117,3 +121,31 @@ plot_graphs();
// }) // })
// } // }
// }) // })
// function draw_temp_graph() {
// var trace = {
// type: 'line',
// y: temperatures,
// x: formatted_datetimes,
// text: "Air temperature",
// marker: { color: '#00FFFF', line: {width: 5}}
// }
// var data = [trace]
// var layout = {
// title: 'Air temperature',
// font: { size: 15, color: '#AAAAAA' },
// paper_bgcolor: '#111111',
// plot_bgcolor: '#111111',
// title: {text: "Air tempereature",font: {color: '#FFFFFF'}},
// xaxis: {title: {text: 'Date',font: {color: '#FFFFFF'}}},
// yaxis: {title: {text: 'Temperature in ºC',font: {color: '#FFFFFF'}}}
// }
// var config = { responsive: true, scrollZoom: true, displaylogo: false}
// Plotly.newPlot('temp_chart', data, layout, config)
// }