diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/index.html | 5 | ||||
| -rw-r--r-- | www/js/EventsGraphsCtrl.js | 154 | ||||
| -rw-r--r-- | www/js/controllers.js | 2 | ||||
| -rw-r--r-- | www/templates/events-graphs.html | 65 |
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> |