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]

:+1:

[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">

[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 :)