109 lines
2.8 KiB
JavaScript
109 lines
2.8 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 createGraph() {
|
|
var trace1 = {
|
|
type: 'line',
|
|
y: temperatures,
|
|
x: formatted_datetimes,
|
|
text: "trace.text variable",
|
|
name: "Air temperature",
|
|
marker: {
|
|
color: '#00FFFF',
|
|
line: {
|
|
width: 5
|
|
}
|
|
}
|
|
}
|
|
var data = [trace1]
|
|
|
|
var layout = {
|
|
title: 'Air temperature',
|
|
font: { size: 18, color: '#AAAAAA' },
|
|
paper_bgcolor: '#111111',
|
|
plot_bgcolor: '#111111',
|
|
xaxis: {
|
|
title: {
|
|
text: 'Date'
|
|
}
|
|
},
|
|
yaxis: {
|
|
title: {
|
|
text: 'Temperature in deg C'
|
|
}
|
|
}
|
|
}
|
|
|
|
var config = { responsive: true, scrollZoom: true, displaylogo: false}
|
|
|
|
Plotly.newPlot('chart', data, layout, config)
|
|
}
|
|
|
|
async function plot_graphs() {
|
|
await get_all_data()
|
|
console.log("Starting data plot...");
|
|
createGraph()
|
|
// createGraph_2();
|
|
}
|
|
|
|
|
|
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]
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|