Utilizing the countBy function from angular-filter to group and tally the number of entries for a specific column. I'm looking to transfer these values into a separate bar chart on the same page. Despite attempting various methods, I haven't been successful in achieving this.
HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.js"></script> -->
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="http://ui-grid.info/release/ui-grid.css"></script>
<script src="node_modules/angular-chart.js/node_modules/chart.js/dist/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script src="node_modules/angular-filter/dist/angular-filter.min.js"></script>
<!-- <script src="/js/app.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="/css/main.css" type="text/css">
<!-- <link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.css"> -->
</head>
<body>
<div ng-controller="myController">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
<div><canvas id="bar" class="chart chart-bar"chart-data="key" chart-labels="value" chart-series="series"></canvas></div>
<div><li ng-repeat="(key, value) in myData | countBy: 'col_ky'" >Column Key: {{ key }}, Number of Hits: {{ value }}</li></div>
</div>
</body>
</html>
Controller:
var app = angular.module('app',['ngTouch', 'ui.grid', 'chart.js', 'angular.filter']);
app.controller('myController',['$scope', '$http','$filter',function($scope, $http, $filter) {
$scope.barData = [];
$scope.labels = [];
$scope.myData = [{"col_ky":"75421","crt_ts":1501365031000},{"col_ky":"75421","crt_ts":1501124681000},{"col_ky":"75421","crt_ts":1501124688000},{"col_ky":"880610","crt_ts":1501127589000},{"col_ky":"880610","crt_ts":1501127715000},{"col_ky":"891733","crt_ts":1501128075000},{"col_ky":"75421","crt_ts":1501128130000},{"col_ky":"880610","crt_ts":1501128181000},{"col_ky":"75421","crt_ts":1501128192000},{"col_ky":"885110","crt_ts":1501128364000},{"col_ky":"880610","crt_ts":1501128369000},{"col_ky":"326083","crt_ts":1501130957000},{"col_ky":"75421","crt_ts":1501131142000},{"col_ky":"863184","crt_ts":1501131949000}];
}]);
In order to utilize the key and value from ng-repeat within the barData and labels variables in the controller, I would be able to populate the bar chart using barData and labels. Can you provide guidance on how I can achieve this?