johan--/index.html

## 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>

## 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>

## 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"
      });
    }
  }
  })();
	<!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>
	<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">←</span>Previous</a></li>
	<li class="next"><a href="#">Next<span aria-hidden="true">→</span></a></li>
	</ul>
	</nav>
	</div>
	<div class="panel panel-default" ng-controller="PivotCtrl">
	<div id="pivotOutput"></div>
	</div>
	'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"
	});
	}
	}
	})();