Title

From 28f9bff968d0147eb9406a468e232a5e4cc06467 Mon Sep 17 00:00:00 2001 From: marwolaethblack Date: Mon, 4 Dec 2017 12:29:01 +0100 Subject: sort data by day, add lien chart with data from last week --- app/Resources/views/default/AllDataPage.html.twig | 7 ++- src/AppBundle/Controller/LastWeekData.php | 72 +++++++++++++++++++++++ web/js/chartOfReadings.js | 71 ++++++++++++++++++++++ web/js/realtime.js | 4 ++ 4 files changed, 153 insertions(+), 1 deletion(-) create mode 100644 src/AppBundle/Controller/LastWeekData.php create mode 100644 web/js/chartOfReadings.js diff --git a/app/Resources/views/default/AllDataPage.html.twig b/app/Resources/views/default/AllDataPage.html.twig index 6162b49..429e13e 100644 --- a/app/Resources/views/default/AllDataPage.html.twig +++ b/app/Resources/views/default/AllDataPage.html.twig @@ -2,7 +2,8 @@ - Title + All Pollution Data | Pollutometer + @@ -21,5 +22,9 @@ {% endfor %}

+{% block javascripts %} + \ No newline at end of file diff --git a/src/AppBundle/Controller/LastWeekData.php b/src/AppBundle/Controller/LastWeekData.php new file mode 100644 index 0000000..24086c8 --- /dev/null +++ b/src/AppBundle/Controller/LastWeekData.php @@ -0,0 +1,72 @@ + $item) + { + $data[$index]['TimeStamp'] = gmdate('d F l', $item['TimeStamp']); + $readings[$data[$index]['TimeStamp']][] = $data[$index]; + } + + + + $gasAverage = array('Co' => 0, 'No' => 0, 'So' => 0); + foreach($readings as $key => $item) + { + foreach($readings[$key] as $index => $values) + { + + $gasAverage['Co'] += $readings[$key][$index]['Co']; + $gasAverage['No'] += $readings[$key][$index]['No']; + $gasAverage['So'] += $readings[$key][$index]['So']; + + if($index === count($readings[$key]) - 1) + { + $gasAverage['Co'] /= $index + 1; + $gasAverage['No'] /= $index + 1; + $gasAverage['So'] /= $index + 1; + } + } + + $readings[$key] = $gasAverage; + + } + + + $data = json_encode($readings); + + + $response = new Response($data); + $response->headers->set('Content-Type', 'application/json'); + return $response; + + + } +} \ No newline at end of file diff --git a/web/js/chartOfReadings.js b/web/js/chartOfReadings.js new file mode 100644 index 0000000..83f656a --- /dev/null +++ b/web/js/chartOfReadings.js @@ -0,0 +1,71 @@ +var gasReading = { + Co: [], + No: [], + So: [] +}; + +var canvas = document.querySelector('#ctx'); +var ctx = canvas.getContext('2d'); + +var datasets = [{ + label: "Co", + borderColor: "rgb(5, 0, 0)", + fill: false, + data: [] +}, { + label: "No", + borderColor: "rgb(69, 169, 230)", + fill: false, + data: [] +}, { + label: "So", + borderColor: "rgb(246, 250, 15)", + fill: false, + data: [] +}] + + + + +fetch('/lastweek') + .then(function(response) { + return response.json(); + }) + .then(function(data) { + drawChart(data, datasets); + }) + + + + + +function drawChart(gasData, datasets) { + + var finishedData = { + labels: [] + } + + Object.keys(gasData).forEach(function(key) { + finishedData.labels.push(key); + datasets[0].data.push(gasData[key].Co) + datasets[1].data.push(gasData[key].No); + datasets[2].data.push(gasData[key].So); + }); + + finishedData.datasets = datasets; + + + var myLineChart = new Chart(ctx, { + type: 'line', + data: finishedData, + options: { + scales: { + xAxes: [{ + time: { + unit: 'day' + } + }] + } + } + }); +} diff --git a/web/js/realtime.js b/web/js/realtime.js index e090d05..1f5ef22 100644 --- a/web/js/realtime.js +++ b/web/js/realtime.js @@ -88,6 +88,10 @@ function update() { +} + +function drawChart() { + } setInterval(update, 10000); -- cgit v1.2.3