From f4d89b38e6540e0d50b6907989bd2ee79a18d08e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Magdalena=20Grodzi=C5=84ska?= <mag.grodzinska@gmail.com>
Date: Fri, 22 Nov 2019 17:08:45 +0100
Subject: Add chart refreshing

---
 .../cloudatlas/client/templates/attribChart.html   | 31 +++++++++++++---------
 1 file changed, 18 insertions(+), 13 deletions(-)

(limited to 'src/main/resources/pl/edu/mimuw/cloudatlas/client/templates')

diff --git a/src/main/resources/pl/edu/mimuw/cloudatlas/client/templates/attribChart.html b/src/main/resources/pl/edu/mimuw/cloudatlas/client/templates/attribChart.html
index a476301..d1353ed 100644
--- a/src/main/resources/pl/edu/mimuw/cloudatlas/client/templates/attribChart.html
+++ b/src/main/resources/pl/edu/mimuw/cloudatlas/client/templates/attribChart.html
@@ -10,24 +10,29 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     <script type="text/javascript">
         google.charts.load('current', {'packages':['corechart']});
-        google.charts.setOnLoadCallback(drawChart);
+        google.charts.setOnLoadCallback(refreshChart());
 
-        function drawChart() {
-            var data = google.visualization.arrayToDataTable([
-                ['Year', 'Sales', 'Expenses'],
-                ['2013',  1000,      400],
-                ['2014',  1170,      460],
-                ['2015',  660,       1120],
-                ['2016',  1030,      540]
-            ]);
+        function refreshChart() {
+            setInterval(getData, 5000);
+        }
+
+        function getData(){
+            $.getJSON("/attribNumValues", function(data, status){
+                drawChart(data)
+            });
+        }
+
+        function drawChart(jsonData) {
+            var data = google.visualization.arrayToDataTable(jsonData);
 
             var options = {
-                title: 'Company Performance',
-                hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
-                vAxis: {minValue: 0}
+                title: 'Attribute values',
+                hAxis: {title: 'Timestamp',  titleTextStyle: {color: '#333'}},
+                vAxis: {minValue: 0},
+                interpolateNulls: true
             };
 
-            var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
+            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
             chart.draw(data, options);
         }
     </script>
-- 
cgit v1.2.3