Switched back to tc-chart

4 files changed, 132 insertions, 94 deletions

diff --git a/www/index.html b/www/index.html
index cc9667ea..cc488f30 100644
--- a/www/index.html
+++ b/www/index.html
@@ -46,7 +46,12 @@
     <script src="js/HelpCtrl.js"></script>
     <script src="js/StateCtrl.js"></script>
 
+    <script src="lib/Chart.js/Chart.js"></script>
 
+
+    <script src="lib/tc-angular-chartjs/dist/tc-angular-chartjs.min.js"></script>
+
+    <script src="lib/chart.horizontalbar/Chart.HorizontalBar.js"></script>
     <script src="lib/angular-google-chart/ng-google-chart.js"></script>
     <script src="lib/ng-mfb/src/mfb-directive.js"></script>
     <script src="lib/moment/moment.js"></script>
diff --git a/www/js/EventsGraphsCtrl.js b/www/js/EventsGraphsCtrl.js
index 5ba89205..dc73b9eb 100644
--- a/www/js/EventsGraphsCtrl.js
+++ b/www/js/EventsGraphsCtrl.js
@@ -10,7 +10,7 @@
 // FIXME: I need to clean this up, the animation is stupid because the data loads
 // dynamically. I think I should really be using $q.all to animate after we get everything
 
-angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ionicPlatform', '$scope', 'ZMDataModel', '$ionicSideMenuDelegate', '$rootScope', '$http', function ($ionicPlatform, $scope, ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http) {
+angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ionicPlatform', '$scope', 'ZMDataModel', '$ionicSideMenuDelegate', '$rootScope', '$http', function ($ionicPlatform, $scope, ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http, $element) {
     console.log("Inside Graphs controller");
     $scope.openMenu = function () {
         $ionicSideMenuDelegate.toggleLeft();
@@ -41,15 +41,30 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
         }
         }];
 
-    $scope.generateChart = function (chartTitle, hrs) {
+ //   $scope.chartObject=[{},{},{},{}];
 
-        $scope.chartObject = {};
 
-        var dateRange = "";
+    angular.element(document).ready(function () {
+        console.log('****DOCUMENT READY******');
+    });
+
+    $scope.generateTCChart = function(id,chartTitle, hrs)
+    {
+        var monitors = [];
+
+
+     var canvases = document.getElementById('superman');
+        //console.log ("**** FOUND " + canvases.length + "CANVASES");
+       // for (var i = 0; i < canvases.length; i++) {
+      //      console.log ("*** FOUND CANVAS");
+            //context.push(canvases[i].getContext('2d'));
+     //   }
+         var dateRange = "";
         var startDate = "";
         var endDate = "";
+        $scope.barHeight=$rootScope.devHeight;
 
-        if (hrs) {
+         if (hrs) {
             // Apply a time based filter if I am not watching all events
             var cur = moment();
             endDate = cur.format("YYYY-MM-DD hh:mm:ss");
@@ -58,59 +73,43 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
 
         }
 
-        $scope.chartObject.data = [
-        ['Monitor', 'Events', {
-                role: 'style'
-        }, {
-                role: 'annotation'
-        }],
-        ['', 0, '', ''] // needed to get rid of the initial error of charts
-                        // FIXME: does it really work? I noticed the red warning
-                        // coming up on the device
-      ];
-
-
-        $scope.chartObject.type = "BarChart";
-        $scope.chartObject.options = {
-            title: chartTitle,
-            tooltip: {isHtml:true, trigger: 'both'},
-            height: $rootScope.devHeight,
-            // # of bars
-            legend: 'none',
-            bar: {
-                groupWidth:"90%",
-            },
-            animation: {
-                duration: 700,
-                easing: 'linear',
-                startup: 'true',
-            },
-
-            hAxis: {
-                gridlines: {
-                    color: 'transparent',
-                    },
-                textPosition:'none'
-            }
+        var loginData = ZMDataModel.getLogin();
 
 
-        };
+         $scope.data={};
+         $scope.data = {
+      labels: [],
+      datasets: [
+        {
+          label: '',
+           fillColor: 'rgba(151,187,205,0.5)',
+          strokeColor: 'rgba(151,187,205,0.8)',
+          highlightFill: 'rgba(151,187,205,0.75)',
+          highlightStroke: 'rgba(151,187,205,1)',
+          data: []
+        },
+          ]
+    };
 
-        var monitors = [];
-        var loginData = ZMDataModel.getLogin();
-        console.log("*** Grabbing lists of events and monitors ");
-        ZMDataModel.getMonitors(0).then(function (data) {
+          ZMDataModel.getMonitors(0).then(function (data) {
 
             monitors = data;
             var adjustedHeight = monitors.length * 30;
             if (adjustedHeight > $rootScope.devHeight) {
-                console.log("Readjusting chart height to " + adjustedHeight + " pixels");
-                $scope.chartObject.options.height = adjustedHeight;
+
+               $scope.barHeight = adjustedHeight;
+                console.log ("********* BAR HEIGHT TO "+$scope.barHeight);
             }
+
             for (var i = 0; i < monitors.length; i++) {
                 (function (j) { // loop closure - http is async, so success returns after i goes out of scope
                     // so we need to bind j to i when http returns so its not out of scope. Gak.
                     // I much prefer the old days of passing context data from request to response
+
+                    $scope.data.labels.push(monitors[j].Monitor.Name);
+                   //$scope.chartObject[id].data.push([monitors[j].Monitor.Name,'0','color:#76A7FA','0']);
+                    // $scope.chartObject.data[j+1]=([monitors[j].Monitor.Name,'100','color:#76A7FA','0']);
+
                     var dateString = "";
                     if (hrs) {
                         dateString = "/StartTime >=:" + startDate + "/EndTime <=:" + endDate;
@@ -118,36 +117,33 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
                     var url = loginData.apiurl +
                         "/events/index/MonitorId:" + monitors[j].Monitor.Id + dateString +
                         ".json?page=1";
-                    console.log("Monitor event URL:" + url);
+                   // console.log("Monitor event URL:" + url);
                     if (!ZMDataModel.isSimulated()) {
                         $http.get(url /*,{timeout:15000}*/ )
                             .success(function (data) {
                                 console.log("**** EVENT COUNT FOR MONITOR " +
                                     monitors[j].Monitor.Id + " IS " + data.pagination.count);
 
-                                console.log("Pushing " + monitors[j].Monitor.Name +
-                                    " AND " + data.pagination.count);
 
-                                $scope.chartObject.data.push([monitors[j].Monitor.Name, data.pagination.count,
-                          'color: #76A7FA', data.pagination.count]);
+                            $scope.data.datasets[0].data[j] = data.pagination.count;
+
+
 
                             })
                             .error(function (data) {
                                 // ideally I should be treating it as an error
                                 // but what I am really doing now is treating it like no events
                                 // works but TBD: make this into a proper error handler
-                                console.log("**** EVENT COUNT FOR MONITOR " +
-                                    monitors[i].Monitor.Id + " IS ERROR ");
-                                $scope.chartObject.data.push([monitors[j].Monitor.Name,
-                                                      0, 'color: #76A7FA', 0]);
+
+
+                             $scope.data.datasets[0].data[j] = 0;
 
                             });
                     } // is not simulated
                     else // simulated: grab a random event count
                     {
                         var rndEventCount = Math.floor(Math.random() * (100 - 20 + 1)) + 20;
-                        $scope.chartObject.data.push([monitors[j].Monitor.Name, rndEventCount,
-                          'color: #76A7FA', rndEventCount]);
+                         $scope.data.datasets[0].data[j] = rndEventCount;
 
                     }
                 })(i); // j
@@ -156,6 +152,48 @@ angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ioni
 
         });
 
-    }; // scope function
+
+
+
+         $scope.options =  {
+
+      // Sets the chart to be responsive
+      responsive: true,
+
+
+      //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
+      scaleBeginAtZero : true,
+
+      //Boolean - Whether grid lines are shown across the chart
+      scaleShowGridLines : false,
+
+      //String - Colour of the grid lines
+      scaleGridLineColor : "rgba(0,0,0,.05)",
+
+      //Number - Width of the grid lines
+      scaleGridLineWidth : 1,
+
+      //Boolean - If there is a stroke on each bar
+      barShowStroke : true,
+
+      //Number - Pixel width of the bar stroke
+      barStrokeWidth : 2,
+
+      //Number - Spacing between each of the X value sets
+      barValueSpacing : 5,
+
+      //Number - Spacing between data sets within X values
+      barDatasetSpacing : 1,
+
+      //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].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
+    };
+
+
+
+    };
+
+
+
 
 }]);
diff --git a/www/js/controllers.js b/www/js/controllers.js
index 70c0cc39..d11b248a 100644
--- a/www/js/controllers.js
+++ b/www/js/controllers.js
@@ -2,7 +2,7 @@
 /* jshint browser: true*/
 /* global cordova,StatusBar,angular,console */
 
-angular.module('zmApp.controllers', ['ionic',   'googlechart', 'ngCordova', 'ng-mfb' ])
+angular.module('zmApp.controllers', ['ionic',  'tc.chartjs', 'ngCordova', 'ng-mfb' ])
 
 
 .controller('zmApp.AppCtrl', function($scope, $ionicSideMenuDelegate) {
diff --git a/www/templates/events-graphs.html b/www/templates/events-graphs.html
index 96886588..fe2a6326 100644
--- a/www/templates/events-graphs.html
+++ b/www/templates/events-graphs.html
@@ -7,77 +7,72 @@
     <!-- I'm calling the same controller function but with different parameters when
             you switch between tabs -->
     <ion-tabs class="tabs-icon-top tabs-stable">
-        <ion-tab title="All" icon="ion-stats-bars" on-select="generateChart('All Events',0)">
+        <ion-tab title="All" icon="ion-stats-bars" on-select="generateTCChart(0,'All Events',0)">
             <ion-nav-view>
                 <ion-content class="has-header">
 
-                    <div google-chart chart="chartObject"></div>
-
+            <div style="overflow:scroll;">
+                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options" >
+                        </canvas>
+                    </div>
 
                 </ion-content>
             </ion-nav-view>
         </ion-tab>
 
-        <ion-tab title="Last Hour" icon="ion-stats-bars" on-select="generateChart('Events in the last hour',1)">
+
+
+
+        <ion-tab title="Last Hour" icon="ion-stats-bars" on-select="generateTCChart(1,'Events in the last hour',1)">
             <ion-nav-view>
 
                 <ion-content>
                     <span></span>
-                    <div google-chart chart="chartObject"></div>
 
+                    <div style="overflow:scroll;">
+                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options" >
+                        </canvas>
+                    </div>
+                        </canvas>
+
+                        <!-- <div google-chart chart="chartObject[1]"></div>-->
+                    </div>
 
                 </ion-content>
             </ion-nav-view>
         </ion-tab>
 
-        <ion-tab title="Day" icon="ion-stats-bars" on-select="generateChart('Events in the last day',24)">
+        <ion-tab title="Day" icon="ion-stats-bars" on-select="generateTCChart(2,'Events in the last day',24)">
             <ion-nav-view>
 
                 <ion-content>
                     <span></span>
-                    <div google-chart chart="chartObject"></div>
-
+                    <div style="overflow:scroll;">
+                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options" >
+                        </canvas>
+                    </div>
 
                 </ion-content>
             </ion-nav-view>
         </ion-tab>
-        <ion-tab title="Week" icon="ion-stats-bars" on-select="generateChart('Events in the last week',168)">
+        <ion-tab title="Week" icon="ion-stats-bars" on-select="generateTCChart(3,'Events in the last week',168)">
             <ion-nav-view>
 
                 <ion-content>
                     <span></span>
-                    <div google-chart chart="chartObject"></div>
-
-
+                    <!--
+                    <div google-chart chart="chartObject[3]"></div>-->
+                     <div style="overflow:scroll;">
+                        <canvas  tc-chartjs-bar  chart-data="data" chart-options="options" >
+                        </canvas>
+                    </div>
                 </ion-content>
             </ion-nav-view>
         </ion-tab>
 
     </ion-tabs>
 
-    <!--
-
-
-
-    <ion-content>
-        <ion-slide-box>
-            <ion-slide-pager> </ion-slide-pager>
-            <ion-slide>
-                <canvas tc-chartjs chart-type="bar" chart-options="options" chart-data="data" auto-legend></canvas>
-                Slide 1
-            </ion-slide>
-            <ion-slide>
-                <div class="box blue">
-                    <h1>BLUE</h1>
-                </div>
-            </ion-slide>
-            <ion-slide>
-                Slide 3
-            </ion-slide>
-
-        </ion-slide-box>
-    </ion-content>
--->
+
 
 
 </ion-view>