pivot table
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div ng-app="DemoApp">
<div ng-controller="ExampleController">
<table>
<th>{{myJSON.dimension}}</th>
<th ng-repeat="facetssVal in myJSON.facets.pivots[0].facets">{{facetssVal.facet}}</th></tr>
<tr ng-repeat="facetVal in myJSON.facets">
<td>{{facetVal.facet}}</td>
</tr>
</table>
</div>
</div>
CSS
#tableShell {
margin: 20px;
width: 400px;
}
.table td, .table th {
text-align: center;
}
.sideHeader {
border-right-width: 2px !important;
font-weight: bold;
text-align: left !important;
}
.totalsRow td{
border-top-width: 2px !important;
font-weight: bold;
font-style: italic;
}
JavaScript
var demoApp = angular.module('DemoApp', []);
angular.module('DemoApp')
.controller('ExampleController', function ($scope) {
$scope.myJSON = {
"dimension": "corporateBand",
"facets": [
{
"facet": "EB",
"pivots": [
{
"dimension": "region",
"facets": [
{
"facet": "Africa",
"employeeCount": 1,
"headCount": 1
},
{
"facet": "ASEAN",
"employeeCount": 2,
"headCount": 2
},
{
"facet": "Canada",
"employeeCount": 2,
"headCount": 1
},
{
"facet": "Eastern Europe",
"employeeCount": 5,
"headCount": 5
},
{
"facet": "Greater China",
"employeeCount": 2,
"headCount": 2
},
{
"facet": "India",
"employeeCount": 5,
"headCount": 5
},
{
"facet": "MENAT",
"employeeCount": 2,
"headCount": 2
},
{
"facet": "United States",
"employeeCount": 122,
"headCount": 116
},
{
"facet": "Western Europe",
...