PivotTable with AngularJS

[OscarAgreda]

Here is a simple way of using this awesome pivot table with angular without building a directive.

HTML VIEW http://grab.by/A0FW
github did not allow me to paste html , so here is the image

ANGULAR CONTROLLER

'use strict';
(function () {
angular.module('app').controller('productPivot', productPivot);

function productPivot($scope, $http) {
$scope.products = [];
getProducts();

    function getProducts() {
        var entity = 'Product';
        var resource = 'getProducts';
        var url = 'http://' + window.location.host + '/api/' + entity + '/' + resource;
        return $http.get(url).
        success(function (data) {
            $scope.products = data;
            pivotUi();
        }).
        error(function (error) {
        });
    }

    function pivotUi() {
        var derivers = $.pivotUtilities.derivers;
        $("#productsPivotTableOutput").pivotUI($scope.products, {
            rows: ["Name"],
            cols: ["CanBeSold"],
            rendererName: "Table"
        });
    }
}

})();

you can also use d3
html http://grab.by/A0H8
js http://grab.by/A0H4
ui http://grab.by/A0Ha

and if you want to go "fully loaded" , by including Google Charts
on the index.html http://grab.by/A0IQ
on the view http://grab.by/A0IU
JS http://grab.by/A0J0

Thanks Nicolas, you rock

[nidelson]

👍

[Angularjschile]

+1

[jithu21]

awsome

[nicolaskruchten]

This is also related: #272

[mreddimasi]

Reports an error when we use it the above example, any idea why?
TypeError: Cannot read property 'derivers' of undefined

This is for the line
var derivers = $.pivotUtilities.derivers;

[nicolaskruchten]

@mreddimasi if you're seeing that error, it means you have not loaded the pivot.js file.

[mreddimasi]

@nicolaskruchten Thanks you so much, pivot.js was not loaded indeed ( I had it in the wrong location, which was getting cleared when using through yeoman generators). Included pivot.js and pivot.css

Faced with new error
TypeError: undefined is not a function
at $.fn.pivotUI (pivot.js:1193)
at pivotUI (pivot.controller.js:28)
at Object.success (pivot.controller.js:18)

html is as below

line # 28 is
$("#pivotOutput").pivotUI($scope.data, {

in the code below

pivot.controller.js
'use strict';

(function() {
angular.module('analyticsApp').controller('PivotCtrl', PivotCtrl);

function PivotCtrl($scope, $http) {
$scope.data = [];
getData();
// console.log("Inside PivotCtrl");

function getData() {
  //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);
    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;
      }
    }
  });
}

}
})();

[nicolaskruchten]

I'm not really well-positioned to support this AngularJS contribution, so I'll defer to the original author....

[OscarAgreda]

Hello
I have an old project at home, I'll post some help today !

[nicolaskruchten]

@OscarAgreda Thanks! Are you able to create a Gist at https://gist.github.com with this instead of posting an attachment or screenshots of code? I think it would work better :)

[OscarAgreda]

yes, Thanks, here it is
https://gist.github.com/OscarAgreda/49b4e2ac3d7b22920311

[mreddimasi]

@OscarAgreda @nicolaskruchten Thank you so much for the clarification and your help
The problem was with not importing the jquery-ui-plugin

Was able to display the UI, but all the styles are missing, I can see it as below. I've included the pivot.css. Not sure if the problem is with having bootstrap also (which could have css-reset), are we seeing a similar behavior. Will try disabling bootstrap and check

[mreddimasi]

created a Gist for it https://gist.github.com/9376bf9320fa06d60837

[mreddimasi]

Please ignore my comments, the problem was with improper import again
Changed
<link href="bower_components/pivottable/dist/pivot.css"/ >
to
<link rel="stylesheet" href="bower_components/pivottable/dist/pivot.css"/>

and it works. Thank you so much again

[nicolaskruchten]

Glad it all worked out :)

[Angularjschile]

pivot directive
use;
< pivot data="data"></ pivot >
or
< div pivot="" data="data">
code:
https://gist.github.com/Angularjschile/1170ea3ba7d263b584e3

[dreftymac]

+1

[sanskith]

I am using pivot.js with angularjs and loading all dependencies with Require.js.

I want to use Bar chart and Area chart, but I am getting error as "ReferenceError: c3 is not defined".

what is the meaning of this error. If possible post some sample code how to load dependencies (like c3.min.js, d3.min.js and so on...)
Can you plz help me?

[nicolaskruchten]

You just need to load c3.min.js somewhere... The C3 example has that: http://nicolas.kruchten.com/pivottable/examples/c3.html

[sanskith]

I was able to generate the chart without angularJS, but when I am trying to generate the chart with AngularJs I am getting error as "ReferenceError: c3 is not defined".

I am unable to load c3.js using Require.JS.

Any thoughts on this?

[nicolaskruchten]

Sorry, I have no idea how to deal with C3/Require/Angular integration issues, I just build the PivotTable :) Perhaps StackOverflow would be able to help you with this particular integration task.

[OscarAgreda]

Hello, yes StackOverflow is best hope to get it solved.
Here is a piece of code, i used some time ago to load a huge/complex js file (d3.js) with require.
I hope it helps
https://gist.github.com/OscarAgreda/6db6bd6e8a2bf99b611b
i removed all of my other javascript files from the gist, just left d3.js, but you will get the idea by looking at the code.

[sanskith]

As I am getting "ReferenceError: c3 is not defined" error, Can I pass C3 as input parameter to c3_renderers.js ?

[sanskith]

Below is my sample code, is there any thing wrong
require(["d3", "c3",'jquery-ui.min','pivot','c3_renderers'], function(d3,c3) {
window.d3 = d3;
$scope.products = [];
getProducts();

            function getProducts() {

                var url = 'http://localhost:8080/videos';
                return $http.get(url).
                success(function (data) {
                    $scope.products = data;
                    pivotUi();
                }).
                error(function (error) {
                    alert('Error');
                });
            }

            function pivotUi() {

                var derivers = $.pivotUtilities.derivers;
                var renderers = $.extend($.pivotUtilities.renderers, $.pivotUtilities.c3_renderers);

             alert('from sample');

                $("#output").pivotUI($scope.products, {
                     renderers: renderers,
                     cols: ["videoName"], rows: ["likeCount"],
                     rendererName: "Area Chart"
                });
            }

        });

[sanskith]

Issue got resolved. Below is the code.

require(["d3"], function(d3) {
require([ "c3",'jquery-ui.min','pivot','c3_renderers'], function(c3) {
window.c3 = c3;
......
});
});

Thanks for the information

[OscarAgreda]

so you just added "c3" in the same way I showed you how i add "d3", right

[sanskith]

Yes

[c0r3yz]

If it helps anyone with a simlar need to my own, here is the Angular directive threw together based on the one @Angularjschile made that supports the ability to switch between pivot and pivotUI to allow for edit and display views.

https://gist.github.com/c0r3yz/8ba37a3009e2a719210c

[erashu212]

Hi @OscarAgreda ,

Is there any way to implement paging for big amount of data.

Thanks,
Ashutosh

[yolnda]

hi @sanskith,
hi @OscarAgreda,

how about get data from url ?
use laravel

[irfanwv]

I am using angular (material ui), Now I am facing error $.fn.pivotUI@http://infinity.local.com/vendor/jquery-2.2.1.min.js line 2 > eval:1630:9

How I can resolve this issue.
Code :

var jsonData = [{"nsm": "NSM","rsm": "Central","asm": "Suraj","sr": "Sameer","outlet": "Outlet007","distributor": "Distributo","region": "Central","sku": "PET-1 Ltr","category": "TWP-PET","period": "Feb","qty": 5,"price": 100,"value": 500,"indicate": "S"}, {"nsm": "NSM","rsm": "Central","asm": "Suraj","sr": "Sameer","outlet": "Outlet004","distributor": "Distributo","region": "Central","sku": "EXOTIC 315 ML X 12 PCS","category": "EXOTIC","period": "Feb","qty": 2,"price": 120,"value": 240,"indicate": "S"}];

jQuery(function(){
           var derivers = jQuery.pivotUtilities.derivers;
           jQuery("#output").pivotUI(jsonData, {
               rows: ["sku"], cols: ["value"]
           });
       });

[nicolaskruchten]

Does anyone on this thread want to help me build an "official" Angular connector for this library? I'm getting a lot of questions about it but I'm a React guy not an Angular guy so I'd need a bit of guidance :)

[anandgupta08]

@nicolaskruchten please do let me know how I can help to port to Angular. Would be delighted to be part of this initiative.

[nicolaskruchten]

@anandgupta08 unfortunately I'm no longer really available to work on an Angular port... but if you want to make one I might be able to advise a bit :)