#209 parts working

Former-commit-id: 75027c16d19fdce23d10462e9820a33e2aabdc00

1 files changed, 32 insertions, 78 deletions

diff --git a/www/js/TimelineModalCtrl.js b/www/js/TimelineModalCtrl.js
index 7f41dc54..b702c71e 100644
--- a/www/js/TimelineModalCtrl.js
+++ b/www/js/TimelineModalCtrl.js
@@ -1,7 +1,7 @@
 // Common Controller for the montage view
 /* jshint -W041 */
 /* jslint browser: true*/
-/* global saveAs, cordova,StatusBar,angular,console,ionic, moment */
+/* global saveAs, cordova,StatusBar,angular,console,ionic, moment, vis */
 
 
 
@@ -69,7 +69,7 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
         .then (function (success)
                {
                     $scope.eventdetails = JSON.stringify(success);
-                    drawGraph(success);
+                    drawGraph(success.data);
         },
                function (error)
                {
@@ -80,85 +80,39 @@ angular.module('zmApp.controllers').controller('TimelineModalCtrl', ['$scope', '
     
     function drawGraph(event)
     {
+        console.log ("EVENT IS  " + JSON.stringify(event));
         // Chart.js Data
-    $scope.data = {
-      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-      datasets: [
-        {
-          label: 'My First dataset',
-          fillColor: 'rgba(220,220,220,0.2)',
-          strokeColor: 'rgba(220,220,220,1)',
-          pointColor: 'rgba(220,220,220,1)',
-          pointStrokeColor: '#fff',
-          pointHighlightFill: '#fff',
-          pointHighlightStroke: 'rgba(220,220,220,1)',
-          data: [65, 59, 80, 81, 56, 55, 40]
-        },
+        var items = [];
+        
+        for (var i=0; i< event.event.Frame.length; i++)
         {
-          label: 'My Second dataset',
-          fillColor: 'rgba(151,187,205,0.2)',
-          strokeColor: 'rgba(151,187,205,1)',
-          pointColor: 'rgba(151,187,205,1)',
-          pointStrokeColor: '#fff',
-          pointHighlightFill: '#fff',
-          pointHighlightStroke: 'rgba(151,187,205,1)',
-          data: [28, 48, 40, 19, 86, 27, 90]
+            console.log ("Pushing " + event.event.Frame[i].TimeStamp +":"+ event.event.Frame[i].Score);
+            items.push ({x:event.event.Frame[i].TimeStamp,
+                         y:event.event.Frame[i].Score}
+                        );
         }
-      ]
-    };
-
-    // Chart.js Options
-    $scope.options =  {
-
-      // Sets the chart to be responsive
-      responsive: true,
-
-      ///Boolean - Whether grid lines are shown across the chart
-      scaleShowGridLines : true,
-
-      //String - Colour of the grid lines
-      scaleGridLineColor : "rgba(0,0,0,.05)",
-
-      //Number - Width of the grid lines
-      scaleGridLineWidth : 1,
-
-      //Boolean - Whether the line is curved between points
-      bezierCurve : true,
-
-      //Number - Tension of the bezier curve between points
-      bezierCurveTension : 0.4,
-
-      //Boolean - Whether to show a dot for each point
-      pointDot : true,
-
-      //Number - Radius of each point dot in pixels
-      pointDotRadius : 4,
-
-      //Number - Pixel width of point dot stroke
-      pointDotStrokeWidth : 1,
-
-      //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
-      pointHitDetectionRadius : 20,
-
-      //Boolean - Whether to show a stroke for datasets
-      datasetStroke : true,
-
-      //Number - Pixel width of dataset stroke
-      datasetStrokeWidth : 2,
-
-      //Boolean - Whether to fill the dataset with a colour
-      datasetFill : true,
-
-      // Function - on animation progress
-      onAnimationProgress: function(){},
-
-      // Function - on animation complete
-      onAnimationComplete: function(){},
-
-      //String - A legend template
-      legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].strokeColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
-    };
-        $scope.json_data = JSON.stringify($scope.data);
+        
+        
+        var dataset = new vis.DataSet(items);
+      var options = {
+          style:'bar',
+          start: event.event.Frame[0].TimeStamp,
+          end: event.event.Frame[event.event.Frame.length-1].TimeStamp,
+          max: event.event.Frame[event.event.Frame.length-1].TimeStamp,
+          min: event.event.Frame[0].TimeStamp,
+          barChart:
+          {
+             width: 50,
+             sideBySide:true,
+             align:'center'
+          },
+          dataAxis:
+          {
+              left: {title: {text:'score'}},
+          }
+      };
+        var container = document.getElementById('timeline-alarm-vis');
+        var Graph2d = new vis.Graph2d(container, dataset, options);
         $scope.dataReady = true;
 
     }