124 lines
3.5 KiB
JavaScript
124 lines
3.5 KiB
JavaScript
var timestamps = []
|
|
var temperatures = []
|
|
var humidities = []
|
|
var winds = []
|
|
var precipitations = []
|
|
var clouds = []
|
|
var datetimes = []
|
|
var formatted_datetimes = []
|
|
var test_1 = [1, 2, 3, 4, 5, 6, 7]
|
|
var test_2 = [1, 2, 3, 4, 5, 6, 7]
|
|
|
|
async function get_all_data() {
|
|
let database = firebase.firestore()
|
|
let weather_data = database.collection("weather_data")
|
|
console.log("Waiting for data...");
|
|
var data_snapshot = await weather_data.orderBy("timestamp", "asc").get()
|
|
console.log("Got data, Processing...");
|
|
data_snapshot.forEach((data_slice) => {
|
|
var slice = data_slice.data()
|
|
timestamps.push(slice.timestamp)
|
|
datetimes.push(slice.datetime)
|
|
formatted_datetimes.push(slice.datetime.toDate())
|
|
temperatures.push(slice.temp)
|
|
humidities.push(slice.humidity)
|
|
winds.push(slice.wind)
|
|
precipitations.push(slice.rain_1h)
|
|
clouds.push(slice.cloud)
|
|
})
|
|
console.log("Added all data...");
|
|
}
|
|
|
|
function draw_graph(ySeries, names, colors, div_name) {
|
|
var trace = {
|
|
type: data.type,
|
|
y: ySeries.data,
|
|
x: formatted_datetimes,
|
|
text: names.title,
|
|
marker: { color: colors.trace, line: { width: 5 } }
|
|
}
|
|
var data = [trace]
|
|
|
|
var layout = {
|
|
font: { size: 15, color: '#AAAAAA' },
|
|
paper_bgcolor: '#111111',
|
|
plot_bgcolor: '#111111',
|
|
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: false, displaylogo: false }
|
|
|
|
Plotly.newPlot(div_name, data, layout, config)
|
|
}
|
|
|
|
|
|
async function plot_graphs() {
|
|
await get_all_data()
|
|
console.log("Starting data plot...");
|
|
draw_graph(
|
|
{data: temperatures, type: 'line'},
|
|
{title: "Air Temperature",yaxis: "Temperature in ºC"},
|
|
{trace: '#00FFFF'},
|
|
'temp_chart'
|
|
)
|
|
draw_graph(
|
|
{data: humidities, type: 'line'},
|
|
{title: "Humidity",yaxis: "Air humidity in %"},
|
|
{trace: '#00AAFF'},
|
|
'humidity_chart'
|
|
)
|
|
draw_graph(
|
|
{data: winds, type: 'line'},
|
|
{title: "Wind speed",yaxis: "Wind speed in m/s"},
|
|
{trace: '#AAFFAA'},
|
|
'wind_chart'
|
|
)
|
|
draw_graph(
|
|
{data: precipitations, type: 'bar'},
|
|
{title: "Precipitation",yaxis: "Rainfall in mm"},
|
|
{trace: '#FF3333'},
|
|
'rain_chart'
|
|
)
|
|
draw_graph(
|
|
{data: clouds, type: 'line'},
|
|
{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 config = { responsive: true }
|
|
Plotly.newPlot('chart_2', data, layout, config)
|
|
|
|
}
|
|
|
|
plot_graphs();
|
|
|
|
|
|
|
|
// var counter = 0
|
|
// logRef.onSnapshot(function(querySnapshot) {
|
|
// var updates = querySnapshot.docChanges()
|
|
// if (updates.length < 5){
|
|
// updates.forEach(function(change) {
|
|
// var docData = change.doc.data()
|
|
// Plotly.extendTraces('chart', {y:[[docData.value2]]}, [0])
|
|
// counter++
|
|
// if (counter > 50) {
|
|
// Plotly.relayout('chart', {
|
|
// xaxis: {
|
|
// range: [counter - 50, counter]
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|