From 322b79babf45b1bff0d219cfbf10524b975075fd Mon Sep 17 00:00:00 2001 From: marcinzelent Date: Thu, 7 Dec 2017 12:38:55 +0100 Subject: Split all data and data from last week, moved chart to the right side of the page. --- app/Resources/views/base.html.twig | 7 ++- app/Resources/views/default/AllData.html.twig | 35 +++++++++++ app/Resources/views/default/AllDataPage.html.twig | 29 --------- app/Resources/views/default/LastWeekData.html.twig | 35 +++++++++++ .../Controller/AllDataAverageController.php | 68 ++++++++++++++++++++ src/AppBundle/Controller/AllDataController.php | 7 +-- src/AppBundle/Controller/LastWeekData.php | 72 ---------------------- .../Controller/LastWeekDataAverageController.php | 72 ++++++++++++++++++++++ .../Controller/LastWeekDataController.php | 43 +++++++++++++ web/js/AllDataChart.js | 71 +++++++++++++++++++++ web/js/LastWeekDataChart.js | 71 +++++++++++++++++++++ web/js/chartOfReadings.js | 71 --------------------- 12 files changed, 403 insertions(+), 178 deletions(-) create mode 100644 app/Resources/views/default/AllData.html.twig delete mode 100644 app/Resources/views/default/AllDataPage.html.twig create mode 100644 app/Resources/views/default/LastWeekData.html.twig create mode 100644 src/AppBundle/Controller/AllDataAverageController.php delete mode 100644 src/AppBundle/Controller/LastWeekData.php create mode 100644 src/AppBundle/Controller/LastWeekDataAverageController.php create mode 100644 src/AppBundle/Controller/LastWeekDataController.php create mode 100644 web/js/AllDataChart.js create mode 100644 web/js/LastWeekDataChart.js delete mode 100644 web/js/chartOfReadings.js diff --git a/app/Resources/views/base.html.twig b/app/Resources/views/base.html.twig index 3f93ff8..b4cc11a 100644 --- a/app/Resources/views/base.html.twig +++ b/app/Resources/views/base.html.twig @@ -14,8 +14,11 @@ Pollutometer Pollutometer - - All Data Readings + + All Data + + + Last Week Data diff --git a/app/Resources/views/default/AllData.html.twig b/app/Resources/views/default/AllData.html.twig new file mode 100644 index 0000000..7bc33af --- /dev/null +++ b/app/Resources/views/default/AllData.html.twig @@ -0,0 +1,35 @@ +{% extends 'base.html.twig' %} + +{% block body %} +
+
+ + + + + + + + + + + + {% for table in data %} + + + + + + + {% endfor %} +
TimeStampCoNoSo
{{ table.TimeStamp }}{{ table.Co }}{{ table.No }}{{ table.So }}
+
+
+ +
+
+{% endblock %} +{% block javascripts %} + + - - - TimeStamp - Co - No - So - - - - - {% for table in data %} - {{ table.TimeStamp }} - {{ table.Co }} - {{ table.No }} - {{ table.So }} - - - {% endfor %} - - -{% endblock %} -{% block javascripts %} - - +
+ + + + + + + + + + + + {% for table in data %} + + + + + + + {% endfor %} +
TimeStampCoNoSo
{{ table.TimeStamp }}{{ table.Co }}{{ table.No }}{{ table.So }}
+
+
+ +
+ +{% endblock %} +{% block javascripts %} + + $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/src/AppBundle/Controller/AllDataController.php b/src/AppBundle/Controller/AllDataController.php index 86ec7c5..b45d2c9 100644 --- a/src/AppBundle/Controller/AllDataController.php +++ b/src/AppBundle/Controller/AllDataController.php @@ -2,21 +2,20 @@ namespace AppBundle\Controller; use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; -use Symfony\Component\HttpFoundation\Response; use Symfony\Bundle\FrameworkBundle\Controller\Controller; class AllDataController extends Controller { /** - * @Route("/AllDataReadings", name="AllData") + * @Route("/AllData", name="AllData") */ public function GetAllData() { // Get cURL resource $curl = curl_init(); - curl_setopt($curl, CURLOPT_URL, "https://pollutometerapi.azurewebsites.net/api/Readings/lastweek"); + curl_setopt($curl, CURLOPT_URL, "https://pollutometerapi.azurewebsites.net/api/Readings"); curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json')); // Assuming you're requesting JSON curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); // Send the request & save response to $resp @@ -38,7 +37,7 @@ class AllDataController extends Controller $parametersToTwig = array("data" => $data); - return $this->render('default/AllDataPage.html.twig',$parametersToTwig); + return $this->render('default/AllData.html.twig',$parametersToTwig); } } \ No newline at end of file diff --git a/src/AppBundle/Controller/LastWeekData.php b/src/AppBundle/Controller/LastWeekData.php deleted file mode 100644 index 24086c8..0000000 --- a/src/AppBundle/Controller/LastWeekData.php +++ /dev/null @@ -1,72 +0,0 @@ - $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/src/AppBundle/Controller/LastWeekDataAverageController.php b/src/AppBundle/Controller/LastWeekDataAverageController.php new file mode 100644 index 0000000..fe30fd4 --- /dev/null +++ b/src/AppBundle/Controller/LastWeekDataAverageController.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/src/AppBundle/Controller/LastWeekDataController.php b/src/AppBundle/Controller/LastWeekDataController.php new file mode 100644 index 0000000..f77a751 --- /dev/null +++ b/src/AppBundle/Controller/LastWeekDataController.php @@ -0,0 +1,43 @@ + $item) + { + $data[$index]['TimeStamp'] = gmdate("l jS \of F Y h:i:s A", $item['TimeStamp']); + } + + $parametersToTwig = array("data" => $data); + + return $this->render('default/LastWeekData.html.twig',$parametersToTwig); + + } +} \ No newline at end of file diff --git a/web/js/AllDataChart.js b/web/js/AllDataChart.js new file mode 100644 index 0000000..8de05cf --- /dev/null +++ b/web/js/AllDataChart.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('/AllDataAverage') + .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/LastWeekDataChart.js b/web/js/LastWeekDataChart.js new file mode 100644 index 0000000..a24d51a --- /dev/null +++ b/web/js/LastWeekDataChart.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('/LastWeekDataAverage') + .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/chartOfReadings.js b/web/js/chartOfReadings.js deleted file mode 100644 index 83f656a..0000000 --- a/web/js/chartOfReadings.js +++ /dev/null @@ -1,71 +0,0 @@ -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' - } - }] - } - } - }); -} -- cgit v1.2.3