From 406ee889381a571f3ffa71d3f683c3fe5213fd1b Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 21 Oct 2020 09:40:16 +0100 Subject: [PATCH] Update --- site/views/index.ejs | 8 +-- site/views/js/main.js | 114 +++++++++++++++++++++++++++--------------- 2 files changed, 78 insertions(+), 44 deletions(-) diff --git a/site/views/index.ejs b/site/views/index.ejs index 0dea58d..19a6a3f 100644 --- a/site/views/index.ejs +++ b/site/views/index.ejs @@ -8,9 +8,11 @@ -
-
- +
+
+
+
+
diff --git a/site/views/js/main.js b/site/views/js/main.js index 21d0a64..0999a60 100644 --- a/site/views/js/main.js +++ b/site/views/js/main.js @@ -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) +// }