Unable to integrate pivottable.js with angular 2

[amit509]

Hi Guys,

Could you please help me to integrate pivottable plugin in angular2 project.

Am unable to integrate, facing issues like undefined tipsData, undefined renderer, pivotUI, aggregator, etc..

It would be great help.

As I have read some where that @benharrell have done with angular2.

Please help me to integrate in angular2.

[benharrell]

Here is a simplified version of how i do it but should get you most of the way there.....

import {ElementRef} from '@angular/core';

declare var jQuery:any;
delcare var $:any;

//using webpack so import the js/css dependencies
//for you this might be a <script/style tag
import 'pivottable/pivot.min.js';
import 'pivottable/pivot.min.css';


@Component(
    ///blah blah normal component stuff, nothing special
)

export class PivotWrapper {

    private el: ElementRef;

    contructor (@Inject(ElementRef)el: ElementRef){
        this.el = el;
    }

    private buildPivot(){

        if (!this.el ||
            !this.el.nativeElement ||
            !this.el.nativeElement.children){
                console.log('cant build without element');
                return;
        }

        var container = this.el.nativeElement;
        var inst = jQuery(container);

        //the below id should be on your html element like div for the pivot
        //per the exmapmle in thepivot docs
        var targetElement = inst.find('#pivot');

        if (!targetElement){
            console.log('cant find the pivot element');
            return;
        }

        //this helps if you build more than once as it will wipe the dom for that element
        while (targetElement.firstChild){
            targetElement.removeChild(targetElement.firstChild);
        }

        //here is the magic
        targetElement.pivot( <your data here> , <your options here> );


        //voila!
    }

}

[benharrell]

This allows you to use the wrapper as component anywhere...mine is setup to allow dynamic columns, etc and handle changing of meta and data to re-render. I'll see if I can clean it up and post on my GitHub sometime soon....good luck!

[benharrell]

I copied above data to my repo...i'll work on it as time allows :)

https://github.com/benharrell/ng2PivotWrapper

[amit509]

Thanks alot benharrell :)
hope you clean it up your data and post as a overall example on your GitHub.

Till then will try to work with the wrapper which you have given, hope I would be able to do it.

[sunnylnct007]

Hi Benharrell, i was able to get angular2 working with pivottable. unfortunately it gives error with the c3 chart options. An error occurred rendering the PivotTable results.
Looking at console log it
TypeError: Unable to get property 'format' of undefined or null reference
at c3_chart_internal_fn.initParams (http://localhost:4200/vendor.bundle.js:1733:5)
at c3_chart_internal_fn.init (http://localhost:4200/vendor.bundle.js:1689:5)
at Chart (http://localhost:4200/vendor.bundle.js:1639:5)
at c3$1.generate (http://localhost:4200/vendor.bundle.js:1664:5)
at Anonymous function (http://localhost:4200/vendor.bundle.js:70009:9)
at $.fn.pivot (eval code:1166:11)

Did you get that working?

[benharrell]

Sorry I did not use the c3 chart options but seems like probably need reference to $.pivotUtilities? just a thought...good luck!

[sunnylnct007]

Thanks Benharrell, I tried the google chart options and got that working so, for now, will park the c3 renderer.

[benharrell]

awesome. glad to hear it!

…

On Jul 25, 2017, at 4:39 PM, sunnylnct007 ***@***.***> wrote: Thanks Benharrell, I tried the google chart options and got that working so, for now, will park the c3 renderer. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[garyyang1016]

@sunnylnct007 Could you help to provide good chart option sample to reference, tnaks.

[sunnylnct007]

@garyyang1016 you can do below:
In package.json you need to reference jquery and pivottable

    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "pivottable": "^2.13.0",

In angular-cli json class:

"styles": [
         "../node_modules/pivottable/dist/pivot.css"      
      ],
     "scripts": ["../node_modules/jquery/dist/jquery.min.js",
      "../node_modules/jquery-ui-dist/jquery-ui.min.js",
      "../node_modules/pivottable/dist/pivot.min.js"
     
      ],

In your component class (for e.g PivotWrapperComponent in this case)

   import { Component, OnInit,Inject, ElementRef, AfterViewInit } from '@angular/core';

   import 'pivottable/dist/pivot.min.js';
  import 'pivottable/dist/pivot.min.css';
  declare var jQuery:any;
  declare var $:any;

  @Component({
  selector: 'app-pivot-wrapper',
  templateUrl: './pivot-wrapper.component.html',
  styleUrls: ['./pivot-wrapper.component.css']
  })

  export class PivotWrapperComponent implements OnInit {
  private el: ElementRef;
    constructor(@Inject(ElementRef)el: ElementRef) { 
       this.el = el;

   }

   ngOnInit() {

      
  }

   ngAfterViewInit(){

    if (!this.el ||
        !this.el.nativeElement ||
        !this.el.nativeElement.children){
            console.log('cant build without element');
            return;
     }

     var container = this.el.nativeElement;
     var inst = jQuery(container);
     var targetElement = inst.find('#output');

     if (!targetElement){
        console.log('cant find the pivot element');
        return;
    }

    //this helps if you build more than once as it will wipe the dom for that element
    while (targetElement.firstChild){
        targetElement.removeChild(targetElement.firstChild);
    }
   console.log(targetElement);
    //here is the magic
    targetElement.pivot([
            {color: "blue", shape: "circle"},
            {color: "red", shape: "triangle"}
        ],
        {
            rows: ["color"],
            cols: ["shape"]
        });
     }

    }

In the corresponding html

    <p>
     pivot-wrapper works!
    </p>
     <div id="output"></div>

Please let me know if it works for you

[garyyang1016]

@sunnylnct007 it works well, but i wanna know how to implement C3 or google chart in angular4.
In additionally, do you know how to input data with variable in angular4?

this.http.get('assets/mps.json').map(res => res.text()).subscribe(data => {this.data = data});
// console.log(this.data);
// here is the magic
targetElement.pivotUI([
  { 'Province': 'Quebec', 'Party': 'NDP', 'Age': 22, 'Name': 'Liu, Laurin', 'Gender': 'Female' },
  { 'Province': 'Quebec', 'Party': 'Bloc Quebecois', 'Age': 43, 'Name': 'Mourani, Maria', 'Gender': 'Female' },
  { 'Province': 'Quebec', 'Party': 'NDP', 'Age': '', 'Name': 'Sellah, Djaouida', 'Gender': 'Female' },
  { 'Province': 'Quebec', 'Party': 'NDP', 'Age': 72, 'Name': 'St-Denis, Lise', 'Gender': 'Female' },
  { 'Province': 'British Columbia', 'Party': 'Liberal', 'Age': 71, 'Name': 'Fry, Hedy', 'Gender': 'Female' }],
  {
    renderers: renderers,
    cols: ['Party'], rows: ['Province'],
    rendererName: 'Horizontal Stacked Bar Chart',
    rowOrder: 'value_z_to_a', colOrder: 'value_z_to_a',
    rendererOptions: {
      c3: {
        data: {
          colors: {
            Liberal: '#dc3912', Conservative: '#3366cc', NDP: '#ff9900',
            Green: '#109618', 'Bloc Quebecois': '#990099'
          }
        }
      }
    }
  });

I have use http to get data, but i can not user this.data to replace the array data.

[ghost]

@sunnylnct007 it works perfectly!
Thanks a lot, saved my day.

[sunnylnct007]

@ArmandoFMM - Glad it works
@garyyang1016 - Sorry for the late reply. Please see below for Google Chart:
In package.json Import the the package:
"angular2-google-chart": "^2.3.0",
In app.module.ts
```
import {GoogleChart} from 'angular2-google-chart/directives/angular2-google-chart.directive';
@NgModule( {GoogleChart

In your component.ts 

  import {GoogleChart} from 'angular2-google-chart/directives/angular2-google-chart.directive';

then you can define the type of chart in your html file. Google chart have nice documentation on that.


On below question:
In additionally, do you know how to input data with variable in angular4?

Do you mean how to get the data from service or you want to read the data from  values entered on UI

[abdelwahebmoalla]

@sunnylnct007 can you provide more details about how to use either google charts or d3 to get the charts
what should I pass as parameters to renderers

[jmubago]

Hello, I have created my own repo for Angular 2+.
You can take a look and see if it helps you.
https://github.com/jmubago/Angular-pivotTable

[anmol171]

@jmubago can you please provide me the details how can i configure working of c3/d3 charts in code of your repo that you have shared on
https://github.com/jmubago/Angular-pivotTable