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">
</head>
<body>
<div id="chart" style="width: 50%;"></div>
<div id="chart_2"></div>
<div id="temp_chart"></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 src="js/fInit.js"></script>
</body>

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

@ -29,67 +29,71 @@ async function get_all_data() {
console.log("Added all data...");
}
function createGraph() {
var trace1 = {
function draw_graph(ySeries, names, colors, div_name) {
var trace = {
type: 'line',
y: temperatures,
y: ySeries,
x: formatted_datetimes,
text: "trace.text variable",
marker: {
color: '#00FFFF',
line: {
width: 5
}
}
text: names.title,
marker: { color: colors.trace, line: { width: 5 } }
}
var data = [trace1]
var data = [trace]
var layout = {
title: 'Air temperature',
font: { size: 18, color: '#AAAAAA' },
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'
}
}
}
title: { text: names.title, font: { color: '#FFFFFF' } },
xaxis: { title: { text: 'Date', font: { color: '#FFFFFF' } } },
yaxis: { title: { text: names.yaxis, 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() {
await get_all_data()
console.log("Starting data plot...");
createGraph()
// createGraph_2();
draw_graph(
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() {
console.log(temperatures);
var data = [ {type: "line", x: formatted_datetimes, y: temperatures} ]
var layout = {title: 'Graph 2', font: { size: 18 }}
var data = [{ type: "line", x: formatted_datetimes, y: temperatures }]
var layout = { title: 'Graph 2', font: { size: 18 } }
var config = { responsive: true }
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)
// }