Skip to content

Instantly share code, notes, and snippets.

@mreddimasi

mreddimasi/index.html

Created February 26, 2015 05:21
Show Gist options
  • Save mreddimasi/9376bf9320fa06d60837 to your computer and use it in GitHub Desktop.
Save mreddimasi/9376bf9320fa06d60837 to your computer and use it in GitHub Desktop.
Download ZIP
Angular and Pivot
Raw
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(client) app/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,client}) app/app.css -->
<link rel="stylesheet" href="app/app.css">
<!-- injector:css -->
<link rel="stylesheet" href="app/app.css">
<link rel="stylesheet" href="app/main/main.css">
<link rel="stylesheet" href="components/modal/modal.css">
<!-- endinjector -->
<!-- endbuild -->
<link href='http://fonts.googleapis.com/css?family=Ceviche+One' rel='stylesheet' type='text/css'>
<link href="bower_components/pivottable/dist/pivot.css"/>
</head>
<body ng-app="analyticsApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ui-view=""></div>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js({client,node_modules}) app/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/lodash/dist/lodash.compat.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,client}) app/app.js -->
<script src="app/app.js"></script>
<!-- injector:js -->
<script src="app/bqService/bqService.service.js"></script>
<script src="app/fields/fields.controller.js"></script>
<script src="app/main/main.controller.js"></script>
<script src="app/main/main.js"></script>
<script src="app/pivot/pivot.controller.js"></script>
<script src="components/modal/modal.service.js"></script>
<script src="components/navbar/navbar.controller.js"></script>
<!-- endinjector -->
<!-- endbuild -->
<script src="bower_components/jqueryui/jquery-ui.min.js"></script>
<script src="bower_components/pivottable/dist/pivot.js"></script>
</body>
</html>
Raw
main.html
<div>
<div class="well">Results <span class="label label-primary">10 of {{records}} Rows</span></div>
<table class="table table-bordered">
<thead><tr><th>{{fields[0].name}}</th></tr></thead>
<tr ng-repeat="row in rows">
<td>{{row.f[0].v}}</td>
</tr>
</table>
<nav>
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">&larr;</span>Previous</a></li>
<li class="next"><a href="#">Next<span aria-hidden="true">&rarr;</span></a></li>
</ul>
</nav>
</div>
<div class="panel panel-default" ng-controller="PivotCtrl">
<div id="pivotOutput"></div>
</div>
Raw
pivotcontroller.js
'use strict';
(function() {
angular.module('analyticsApp').controller('PivotCtrl', PivotCtrl);
function PivotCtrl($scope, $http) {
$scope.data = [];
getData();
// console.log("Inside PivotCtrl");
function getData() {
//return $http.get('/api/fields').success( function(response){
//console.log("Inside getData");
return $.getJSON("mps.json", function(mps) {
//console.log("Looks like we got mps data" );
$scope.data = mps;
//console.log($scope.data[0]["Province"]);
pivotUI();
}).fail(function() {
console.log("Failed to load mps.json");
});
pivotUI();
}
function pivotUI() {
var derivers = $.pivotUtilities.derivers;
//console.log($scope.data);
$("#pivotOutput").pivotUI($scope.data, {
derviedAttributes : {
"Age bin": derivers.bin("Age", 10),
"Gender Imbalance": function(mp) {
return mp["Gender"] == "Male" ? 1 : -1;
}
},
rows: ["Province"],
cols: ["Party"],
aggregatorName: "Integer Sum",
vals: ["Age"],
rendererName: "Table"
});
}
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment