diff options
| author | marwolaethblack <a.unal677@gmail.com> | 2017-12-04 12:29:01 +0100 |
|---|---|---|
| committer | marwolaethblack <a.unal677@gmail.com> | 2017-12-04 12:29:01 +0100 |
| commit | 28f9bff968d0147eb9406a468e232a5e4cc06467 (patch) | |
| tree | e79289fbd7ee4fa6d5280b9328101a1954885c58 | |
| parent | 074799d1471df407663931d6654847fa38484a3e (diff) | |
sort data by day, add lien chart with data from last week
| -rw-r--r-- | app/Resources/views/default/AllDataPage.html.twig | 7 | ||||
| -rw-r--r-- | src/AppBundle/Controller/LastWeekData.php | 72 | ||||
| -rw-r--r-- | web/js/chartOfReadings.js | 71 | ||||
| -rw-r--r-- | web/js/realtime.js | 4 |
4 files changed, 153 insertions, 1 deletions
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 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <title>Title</title> + <title>All Pollution Data | Pollutometer</title> + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script> </head> <body> <table border="1"> @@ -21,5 +22,9 @@ </tr> {% endfor %} </table> +<canvas id="ctx"></canvas> </body> +{% block javascripts %} + <script src="{{ asset('js/chartOfReadings.js') }}"></script +{% endblock %} </html>
\ 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 @@ +<?php +namespace AppBundle\Controller; + +use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route; +use Symfony\Component\HttpFoundation\Response; +use Symfony\Bundle\FrameworkBundle\Controller\Controller; + + +class LastWeekData extends Controller +{ + /** + * @Route("/lastweek", name="LastWeek") + */ + + public function GetLastWeekData() + { + // Get cURL resource + $curl = curl_init(); + curl_setopt($curl, CURLOPT_URL, "https://pollutometerapi.azurewebsites.net/api/Readings/lastweek"); + 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 + $resp = curl_exec($curl); + // Close request to clear up some resources + curl_close($curl); + + $data = json_decode($resp, true); + + $readings = array(); + + + foreach($data as $index => $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 @@ -90,6 +90,10 @@ function update() { } +function drawChart() { + +} + setInterval(update, 10000); |