{"action":"created","issue":{"url":"https://api.github.com/repos/angular-ui/ng-grid/issues/3207","labels_url":"https://api.github.com/repos/angular-ui/ng-grid/issues/3207/labels{/name}","comments_url":"https://api.github.com/repos/angular-ui/ng-grid/issues/3207/comments","events_url":"https://api.github.com/repos/angular-ui/ng-grid/issues/3207/events","html_url":"https://github.com/angular-ui/ng-grid/issues/3207","id":66117965,"number":3207,"title":"Show Aggregation value in chart.","user":{"login":"debayan31","id":11749797,"avatar_url":"https://avatars.githubusercontent.com/u/11749797?v=3","gravatar_id":"","url":"https://api.github.com/users/debayan31","html_url":"https://github.com/debayan31","followers_url":"https://api.github.com/users/debayan31/followers","following_url":"https://api.github.com/users/debayan31/following{/other_user}","gists_url":"https://api.github.com/users/debayan31/gists{/gist_id}","starred_url":"https://api.github.com/users/debayan31/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/debayan31/subscriptions","organizations_url":"https://api.github.com/users/debayan31/orgs","repos_url":"https://api.github.com/users/debayan31/repos","events_url":"https://api.github.com/users/debayan31/events{/privacy}","received_events_url":"https://api.github.com/users/debayan31/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"PaulL1","id":5248789,"avatar_url":"https://avatars.githubusercontent.com/u/5248789?v=3","gravatar_id":"","url":"https://api.github.com/users/PaulL1","html_url":"https://github.com/PaulL1","followers_url":"https://api.github.com/users/PaulL1/followers","following_url":"https://api.github.com/users/PaulL1/following{/other_user}","gists_url":"https://api.github.com/users/PaulL1/gists{/gist_id}","starred_url":"https://api.github.com/users/PaulL1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PaulL1/subscriptions","organizations_url":"https://api.github.com/users/PaulL1/orgs","repos_url":"https://api.github.com/users/PaulL1/repos","events_url":"https://api.github.com/users/PaulL1/events{/privacy}","received_events_url":"https://api.github.com/users/PaulL1/received_events","type":"User","site_admin":false},"milestone":null,"comments":12,"created_at":"2015-04-03T09:53:28Z","updated_at":"2015-04-07T13:20:07Z","closed_at":null,"body":"\r\n![chart](https://cloud.githubusercontent.com/assets/11749797/6980758/bc3462e6-da14-11e4-9dce-a597faa3c077.jpg)\r\n\r\n\r\n\r\nBy reading a JSON I am currently populating given table using ui.grid grouping module. And just right of that there is a chart where I am trying to show state->member mapping (means how many male/female members are there in a particular state). So how can I calculate state->member cardinality ratio so that I can populate stateList[] to show pie chart. In the screenshot I had marked some field in RED, I had to store all the marked value in stateList[].\r\n\r\nFor displaying the chart Fn \"changeView\" is calling. <Currently stateList[] array is just a hard coded array>.\r\n\r\nFor chart representation I am using \"highcharts-ng\" .  \r\n\r\ncolumnDefn.JSON is given below------------->\r\n\r\n[\r\n    {\r\n        \"name\": \"name\",\r\n        \"width\": \"30%\",\r\n        \"displayName\": \"Full Name\",\r\n        \"enableCellEdit\": false,\r\n        \"filter\": {\r\n            \"condition\": \"ENDS_WITH\",\r\n            \"placeholder\": \"ends with\"\r\n        },\r\n        \"aggregationType\": \"count\",\r\n        \"aggregationHideLabel\": false\r\n    },\r\n    {\r\n        \"name\": \"gender\",\r\n        \"grouping\": {\r\n            \"groupPriority\": 1\r\n        },\r\n        \"sort\": {\r\n            \"priority\": 1,\r\n            \"direction\": \"asc\"\r\n        },\r\n        \"width\": \"20%\"\r\n    },\r\n    {\r\n        \"name\": \"age\",\r\n        \"grouping\": {\r\n            \"aggregation\": \"avg\"\r\n        },\r\n        \"width\": \"20%\"\r\n    },\r\n    {\r\n        \"name\": \"company\",\r\n        \"width\": \"25%\"\r\n    },\r\n    {\r\n        \"name\": \"state\",\r\n        \"grouping\": {\r\n            \"groupPriority\": 0\r\n        },\r\n        \"sort\": {\r\n            \"priority\": 0,\r\n            \"direction\": \"desc\"\r\n        },\r\n        \"width\": \"35%\"\r\n    },\r\n    {\r\n        \"name\": \"balance\",\r\n        \"width\": \"25%\",\r\n        \"cellFilter\": \"currency\",\r\n        \"groupingSuppressAggregationText\": true,\r\n        \"grouping\": {\r\n            \"aggregation\": \"avg\"\r\n        }\r\n    }\r\n]\r\n\r\n App.js -------------->\r\n\r\nvar app = angular.module('app', ['ui.bootstrap',\r\n    'highcharts-ng',\r\n    'app.jsonServices',\r\n    'ngAnimate',\r\n    'ngTouch',\r\n    'ui.grid',\r\n    'ui.grid.grouping',\r\n    'ui.grid.pinning',\r\n    'ui.grid.edit',\r\n    'ui.grid.cellNav',\r\n    'ui.grid.resizeColumns',\r\n    'ui.grid.exporter',\r\n    'ui.grid.saveState',\r\n    'ui.grid.moveColumns',\r\n    'ui.grid.pagination',\r\n    'ui.grid.autoResize',\r\n    'ui.grid.selection']);\r\n\r\napp.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', 'uiGridConstants', '$log', 'jsonServices', function ($scope, $http, $interval, uiGridGroupingConstants, uiGridConstants, $log, jsonServices) {\r\n        //$scope.colList = [];\r\n        $scope.toolTip = '';\r\n        $scope.initializeTreeHeaderDefn = function () {\r\n            $scope.successfn = function (retdata) {\r\n                if (retdata.flag) {\r\n                    if (retdata.data !== null) {\r\n                        $scope.columnDefn = retdata.data;\r\n                    }\r\n                } else {\r\n                    $scope.columnDefn = retdata.data;\r\n                }\r\n                if (angular.isDefined($scope.promise)) {\r\n                    $interval.cancel($scope.promise);\r\n                    $scope.promise = undefined;\r\n                }\r\n                if ($scope.columnDefn.length > 0) {\r\n                    angular.forEach($scope.columnDefn, function (value, key) {\r\n\r\n                        //$scope.toolTip = $scope.toolTip + \" , \" + value.name;\r\n                        //alert(JSON.stringify(value.grouping.aggregation));\r\n                        if (value.grouping !== undefined) {\r\n                            if (value.grouping.aggregation !== \"\") {\r\n                                if (value.grouping.aggregation === \"max\") {\r\n                                    value.grouping.aggregation = uiGridGroupingConstants.aggregation.MAX;\r\n                                }\r\n                                else if (value.grouping.aggregation === \"min\") {\r\n                                    value.grouping.aggregation = uiGridGroupingConstants.aggregation.MIN;\r\n                                }\r\n                                else if (value.grouping.aggregation === \"count\") {\r\n                                    value.grouping.aggregation = uiGridGroupingConstants.aggregation.COUNT;\r\n                                }\r\n                                else if (value.grouping.aggregation === \"avg\") {\r\n                                    value.grouping.aggregation = uiGridGroupingConstants.aggregation.AVG;\r\n                                }\r\n                                else if (value.grouping.aggregation === \"sum\") {\r\n                                    value.grouping.aggregation = uiGridGroupingConstants.aggregation.SUM;\r\n                                }\r\n                            }\r\n                            //alert(uiGridGroupingConstants.aggregation.MAX);\r\n                        }\r\n\r\n                        if (value.aggregationType !== \"\") {\r\n                            if (value.aggregationType === \"max\") {\r\n                                value.aggregationType = uiGridGroupingConstants.aggregation.MAX;\r\n                            }\r\n                            else if (value.aggregationType === \"min\") {\r\n                                value.aggregationType = uiGridGroupingConstants.aggregation.MIN;\r\n                            }\r\n                            else if (value.aggregationType === \"count\") {\r\n                                value.aggregationType = uiGridGroupingConstants.aggregation.COUNT;\r\n                            }\r\n                            else if (value.aggregationType === \"avg\") {\r\n                                value.aggregationType = uiGridGroupingConstants.aggregation.AVG;\r\n                            }\r\n                            else if (value.aggregationType === \"sum\") {\r\n                                value.aggregationType = uiGridGroupingConstants.aggregation.SUM;\r\n                            }\r\n                        }\r\n\r\n                        if (angular.isDefined(value.filter)) {\r\n                            if (value.filter.condition === \"GREATER_THAN\") {\r\n                                value.filter.condition = uiGridConstants.filter.GREATER_THAN;\r\n                            }\r\n                            else if (value.filter.condition === \"LESS_THAN\") {\r\n                                value.filter.condition = uiGridConstants.filter.LESS_THAN;\r\n                            }\r\n                            else if (value.filter.condition === \"CONTAINS\") {\r\n                                value.filter.condition = uiGridConstants.filter.CONTAINS;\r\n                            }\r\n                            else if (value.filter.condition === \"ENDS_WITH\") {\r\n                                value.filter.condition = uiGridConstants.filter.ENDS_WITH;\r\n                            }\r\n                            else if (value.filter.condition === \"EXACT\") {\r\n                                value.filter.condition = uiGridConstants.filter.EXACT;\r\n                            }\r\n                            else if (value.filter.condition === \"GREATER_THAN_OR_EQUAL\") {\r\n                                value.filter.condition = uiGridConstants.filter.GREATER_THAN_OR_EQUAL;\r\n                            }\r\n                            else if (value.filter.condition === \"LESS_THAN_OR_EQUAL\") {\r\n                                value.filter.condition = uiGridConstants.filter.LESS_THAN_OR_EQUAL;\r\n                            }\r\n                            else if (value.filter.condition === \"NOT_EQUAL\") {\r\n                                value.filter.condition = uiGridConstants.filter.NOT_EQUAL;\r\n                            }\r\n                            else if (value.filter.condition === \"STARTS_WITH\") {\r\n                                value.filter.condition = uiGridConstants.filter.STARTS_WITH;\r\n                            }\r\n                        }\r\n\r\n//                        if (angular.isDefined(value.cellTooltip) && value.cellTooltip === \"Y\") {\r\n//                            value.cellTooltip = $scope.toolTip;\r\n//                        }\r\n\r\n                        $scope.colDefnPopulated = true;\r\n                        console.log($scope.toolTip);\r\n                    });\r\n\r\n                }\r\n            };\r\n            $scope.failureFn = function (retFaileddata) {\r\n                //console.log(\"INSIDE FAILURE SERVICE\");\r\n            };\r\n            jsonServices.getTreeTableHeader($scope.successfn, $scope.failureFn);\r\n        };\r\n        $scope.promise = $scope.initializeTreeHeaderDefn();\r\n\r\n\r\n        $scope.initializeTreeDataDefn = function () {\r\n            $scope.successfn = function (retdata) {\r\n                if (retdata.flag) {\r\n                    if (retdata.data !== null) {\r\n                        //$scope.gridOptions.data = retdata.data;\r\n                        for (var i = 0; i < retdata.data.length; i++) {\r\n                            retdata.data[i].state = retdata.data[i].address.state;\r\n                            retdata.data[i].balance = Number(retdata.data[i].balance.slice(1).replace(/,/, ''));\r\n                        }\r\n                        delete retdata.data[9].age;\r\n                        $scope.gridOptions.data = retdata.data;\r\n\r\n                    }\r\n                } else {\r\n                    //$scope.gridOptions.data = retdata.data;\r\n                    if (retdata.data !== null) {\r\n                        //$scope.gridOptions.data = retdata.data;\r\n                        for (var i = 0; i < retdata.data.length; i++) {\r\n                            retdata.data[i].state = retdata.data[i].address.state;\r\n                            retdata.data[i].balance = Number(retdata.data[i].balance.slice(1).replace(/,/, ''));\r\n                        }\r\n                        delete retdata.data[2].age;\r\n                        $scope.gridOptions.data = retdata.data;\r\n                    }\r\n                }\r\n                if (angular.isDefined($scope.promise)) {\r\n                    $interval.cancel($scope.promise);\r\n                    $scope.promise = undefined;\r\n                }\r\n\r\n            };\r\n            $scope.failureFn = function (retFaileddata) {\r\n                //console.log(\"INSIDE FAILURE SERVICE\");\r\n            };\r\n            jsonServices.getTreeTableData($scope.successfn, $scope.failureFn);\r\n        };\r\n        $scope.promise = $scope.initializeTreeDataDefn();\r\n\r\n        $scope.$watch('columnDefn', function () {\r\n            if (angular.isDefined($scope.columnDefn) && $scope.columnDefn.length > 0 && $scope.colDefnPopulated) {\r\n                $scope.gridOptions.columnDefs = $scope.columnDefn;\r\n            }\r\n        });\r\n\r\n        $scope.gridOptions = {\r\n            enableSelectAll: true,\r\n            saveFocus: false,\r\n            saveScroll: true,\r\n            paginationPageSize: 14,\r\n            showColumnFooter: true,\r\n            //showGridFooter: true,\r\n            enableGridMenu: true,\r\n            enableFiltering: false,\r\n            modifierKeysToMultiSelectCells: true,\r\n            exporterCsvFilename: 'myFile.csv',\r\n            exporterPdfDefaultStyle: {fontSize: 9},\r\n            exporterPdfTableStyle: {margin: [30, 30, 30, 30]},\r\n            exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},\r\n            exporterPdfHeader: {text: \"My Header\", style: 'headerStyle'},\r\n            exporterPdfFooter: function (currentPage, pageCount) {\r\n                return {text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle'};\r\n            },\r\n            exporterPdfCustomFormatter: function (docDefinition) {\r\n                docDefinition.styles.headerStyle = {fontSize: 22, bold: true};\r\n                docDefinition.styles.footerStyle = {fontSize: 10, bold: true};\r\n                return docDefinition;\r\n            },\r\n            exporterPdfOrientation: 'portrait',\r\n            exporterPdfPageSize: 'LETTER',\r\n            exporterPdfMaxGridWidth: 500,\r\n            exporterCsvLinkElement: angular.element(document.querySelectorAll(\".custom-csv-link-location\")),\r\n            //columnDefs: $scope.colDefn,\r\n            onRegisterApi: function (gridApi) {\r\n                $scope.gridApi = gridApi;\r\n            }\r\n        };\r\n\r\n        $scope.expandAll = function () {\r\n            $scope.gridApi.grouping.\r\n                    $scope.gridApi.grouping.expandAllRows();\r\n        };\r\n\r\n        $scope.toggleRow = function (rowNum) {\r\n            $scope.gridApi.grouping.toggleRowGroupingState($scope.gridApi.grid.renderContainers.body.visibleRowCache[rowNum]);\r\n        };\r\n        //This needs to be change programatically \r\n        $scope.changeGrouping = function () {\r\n            $scope.gridApi.grouping.clearGrouping();\r\n            $scope.gridApi.grouping.groupColumn('age');\r\n            $scope.gridApi.grouping.aggregateColumn('state', uiGridGroupingConstants.aggregation.COUNT);\r\n        };\r\n        //add new row to table\r\n        $scope.addData = function () {\r\n            $scope.gridOptions.intermediateData = [];\r\n            $scope.gridOptions.data.forEach(function addDatas(row, index) {\r\n                if ($scope.gridOptions.paginationPageSize === (index + 1)) {\r\n                    $scope.gridOptions.intermediateData.push({});\r\n                } else {\r\n                    $scope.gridOptions.intermediateData.push($scope.gridOptions.data[index]);\r\n                }\r\n            });\r\n            $scope.gridOptions.data = [];\r\n            $scope.gridOptions.data = $scope.gridOptions.intermediateData;\r\n            grid.redrawInPlace();\r\n            //need to add css for indentification.\r\n            // after editing correctly make it as a normal column.\r\n\r\n\r\n        };\r\n        $scope.msg = {};\r\n        $scope.gridOptions.onRegisterApi = function (gridApi) {\r\n            //set gridApi on scope\r\n            $scope.gridApi = gridApi;\r\n            gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {\r\n                $scope.msg.lastCellEdited = 'Edited row id:  ' + rowEntity.id + ' Column: ' + colDef.name + ' newValue: ' + newValue + ' oldValue: ' + oldValue;\r\n                $scope.$apply();\r\n            });\r\n        };\r\n        //toggle Filter from table\r\n        $scope.toggleFiltering = function () {\r\n            $scope.gridOptions.enableFiltering = !$scope.gridOptions.enableFiltering;\r\n            $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);\r\n        };\r\n        //Remove one or multiple selected Rows.\r\n        $scope.removeRow = function () {\r\n            angular.forEach($scope.gridApi.selection.getSelectedRows(), function (data, index) {\r\n                $scope.gridOptions.data.splice($scope.gridOptions.data.lastIndexOf(data), 1);\r\n            });\r\n        }\r\n\r\n        //Save Current state\r\n        $scope.state = {};\r\n        $scope.saveState = function () {\r\n            $scope.state = $scope.gridApi.saveState.save();\r\n        };\r\n        //Restore state\r\n        $scope.restoreState = function () {\r\n            $scope.gridApi.saveState.restore($scope, $scope.state);\r\n        };\r\n        // $scope.tableClass = 'col-sm-12';\r\n\r\n        $scope.revertView = function () {\r\n            $scope.chartStructure = false;\r\n        };\r\n\r\n        $scope.chartStructure = false;\r\n        \r\n        // Start of chart Representation------------------------------------------------------\r\n        \r\n        $scope.bar = function () {\r\n            this.chartConfig.options.chart.type = 'bar'\r\n        };\r\n        $scope.line = function () {\r\n            this.chartConfig.options.chart.type = 'line'\r\n            this.chartConfig.options.chart.zoomType = 'x'\r\n        };\r\n        $scope.pie = function () {\r\n            this.chartConfig.options.chart.type = 'pie'\r\n        };\r\n\r\n        $scope.chartConfig = {\r\n            options: {\r\n                chart: {\r\n                    type: 'pie'\r\n                }\r\n            },\r\n            series: [{\r\n                    data: []\r\n                }],\r\n            title: {\r\n                text: 'Data Reprentaion'\r\n            },\r\n            loading: false\r\n        };\r\n\r\n        \r\n        $scope.$watch('colList', function () {\r\n            if (angular.isDefined($scope.colList) && $scope.colList.length > 0) {\r\n                $scope.chartConfig.series[0].data = $scope.colList;\r\n            }\r\n        });\r\n       \r\n        \r\n        $scope.changeView = function () {\r\n            $scope.chartStructure = true;\r\n            $scope.colList = [40, 30, 31, 33, 28, 20, 29, 21];\r\n            //$scope.stateList = [];\r\n            var i = 0;\r\n            \r\n            $scope.gridOptions.data.forEach(function getColData(row,col,index,GridColumn) {\r\n                $scope.stateList[i] = row.state;\r\n                i++;\r\n            });\r\n            \r\n        };\r\n        \r\n        \r\n        \r\n    }]);\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/angular-ui/ng-grid/issues/comments/90549337","html_url":"https://github.com/angular-ui/ng-grid/issues/3207#issuecomment-90549337","issue_url":"https://api.github.com/repos/angular-ui/ng-grid/issues/3207","id":90549337,"user":{"login":"debayan31","id":11749797,"avatar_url":"https://avatars.githubusercontent.com/u/11749797?v=3","gravatar_id":"","url":"https://api.github.com/users/debayan31","html_url":"https://github.com/debayan31","followers_url":"https://api.github.com/users/debayan31/followers","following_url":"https://api.github.com/users/debayan31/following{/other_user}","gists_url":"https://api.github.com/users/debayan31/gists{/gist_id}","starred_url":"https://api.github.com/users/debayan31/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/debayan31/subscriptions","organizations_url":"https://api.github.com/users/debayan31/orgs","repos_url":"https://api.github.com/users/debayan31/repos","events_url":"https://api.github.com/users/debayan31/events{/privacy}","received_events_url":"https://api.github.com/users/debayan31/received_events","type":"User","site_admin":false},"created_at":"2015-04-07T13:20:07Z","updated_at":"2015-04-07T13:20:07Z","body":"angular.isArray($scope.gridApi.grid.renderContainers.body.visibleRowCache) value is coming TRUE.\r\n\r\nAlthough error is coming in below line:\r\n\r\n$scope.gridApi.grid.renderContainers.body.visibleRowsCache.forEach(function getTableVisibleContent(row) {\r\n   //my logic...\r\n}\r\n\r\nYour quick response is really appreciated."}}