ejPivotTreeMap

The PivotTreemap is a lightweight control that reads OLAP information and visualizes it in graphical format with the ability to drill up and down.

Example

  • html
  • <ej-pivottreemap ></ej-pivottreemap>
  • ts
  • export class AppComponent {
      //..
     }

    Requires

    • module:jQuery-3.0.0.min.js
    • module:ej.core.js
    • module:ej.data.js
    • module:ej.touch.js
    • module:ej.dialog.js
    • module:ej.draggable.js
    • module:ej.waitingpopup.js
    • module:ej.pivot.common.js
    • module:ej.olap.base.js
    • module:ej.pivotanalysis.base.js
    • module:ej.treemap.js
    • module:ej.pivottreemap.js

    Members

    cssClass string

    Specifies the CSS class to PivotTreeMap to achieve custom theme.

    Default Value: “”

    Example:

  • html
  • <ej-pivottreemap cssClass="gradient-lime"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
      //..
     }

    dataSource object

    Initializes the data source for the PivotTreeMap widget, when it functions completely on client-side.

    Default Value: {}

    Example:

  • html
  • <ej-pivottreemap [dataSource]="dataSource"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
       
        public  dataSource;
    
            constructor()
            {
              this.dataSource = { data: value }; 
            }
     }

    dataSource.data object

    Provides the raw data source for the PivotTreeMap.

    Default Value: null

    Example:

  • html
  • <ej-pivottreemap dataSource.data="http://bi.syncfusion.com/olap/msmdpump.dll"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
       //..
     }

    dataSource.cube string

    Contains the respective cube name from OLAP database as string type.

    Default Value: “”

    Example:

  • html
  • <ej-pivottreemap dataSource.cube="Adventure Works"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
       //..
     }

    dataSource.sourceInfo string

    To set the data source name to fetch data from that.

    Note: This is applicable only for Mondrian connection.

    Default Value: “”

    Example:

  • html
  • <ej-pivottreemap dataSource.sourceInfo="Provider Mondrian"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
       //..
     }

    dataSource.providerName string

    Set the provider name for PivotTreeMap to identify whether the provider is SSAS or Mondrian.

    Note: This is applicable only for client side OLAP data.

    Default Value: “ssas”

    Name Description
    ssas To bind an OLAP data source to PivotTreeMap through SSAS provider.
    mondrian To bind a relational data source to PivotTreeMap through Mondrian provider.

    Example:

  • html
  • <ej-pivottreemap dataSource.providerName="mondrian"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
       //..
     }

    dataSource.catalog string

    In connection with an OLAP database, this property contains the database name as string to fetch the data from the given connection string.

    Default Value: “”

    Example:

  • html
  • <ej-pivottreemap dataSource.catalog="Adventure Works DW 2008 SE"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
       //..
     }

    dataSource.columns array

    Lists out the items to be displayed as series of PivotTreeMap.

    Default Value: []

    Example:

  • html
  • <ej-pivottreemap [dataSource.columns]="columns"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  columns;
    
        constructor()
        {
            this.columns = itemsArray; 
        }
     }

    dataSource.columns.fieldName string

    Allows the user to bind the item by using its unique name as field name.

    Default Value: “”

    Example:

  • html
  • <ej-pivottreemap [dataSource.columns]="columns"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  columns;
    
        constructor()
        {
            this.columns = [{ fieldName : "MyFieldName" }]; 
        }
     }

    dataSource.columns.isNamedSets boolean

    Allows the user to indicate whether the added item is a named set or not.

    Default Value: false

    Example:

  • html
  • <ej-pivottreemap [dataSource.columns]="columns"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  columns;
    
        constructor()
        {
            this.columns = [{ fieldName: "[Core Product Group]", isNamedSets : true }]; 
        }
     }

    dataSource.columns.filterItems object

    Applies filter to the field members.

    Default Value: null

    Example:

  • html
  • <ej-pivottreemap [dataSource.columns]="columns"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  columns;
    
        constructor()
        {
            this.columns = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
        }
     }

    dataSource.columns.filterItems.values array

    Contains the collection of items to be excluded among the field members.

    Default Value: []

    Example:

  • html
  • <ej-pivottreemap [dataSource.columns]="columns"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  columns;
    
        constructor()
        {
            this.columns = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
        }
     }

    dataSource.rows array

    Lists out the items to be displayed as segments of PivotTreeMap.

    Default Value: []

    Example:

  • html
  • <ej-pivottreemap [dataSource.rows]="rows"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  rows;
    
        constructor()
        {
            this.rows = itemsArray; 
        }
     }

    dataSource.rows.fieldName string

    Allows the user to bind the item by using its unique name as field name.

    Default Value: “”

    Example:

  • html
  • <ej-pivottreemap [dataSource.rows]="rows"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  rows;
    
        constructor()
        {
            this.rows = [{ fieldName : "MyFieldName" }];
        }
     }

    dataSource.rows.isNamedSets boolean

    Allows the user to indicate whether the added item is a named set or not.

    Default Value: false

    Example:

  • html
  • <ej-pivottreemap [dataSource.rows]="rows"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  rows;
    
        constructor()
        {
            this.rows = [{ fieldName: "[Core Product Group]", isNamedSets : true }]; 
        }
     }

    dataSource.rows.filterItems object

    Applies filter to the field members.

    Default Value: null

    Example:

  • html
  • <ej-pivottreemap [dataSource.rows]="rows"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  rows;
    
        constructor()
        {
            this.rows = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
        }
     }

    dataSource.rows.filterItems.values array

    Contains the collection of items to be excluded among the field members.

    Default Value: []

    Example:

  • html
  • <ej-pivottreemap [dataSource.rows]="rows"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  rows;
    
        constructor()
        {
            this.rows = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
        }
     }

    dataSource.values array

    Lists out the items supports calculation in PivotTreeMap.

    Default Value: []

    Example:

  • html
  • <ej-pivottreemap [dataSource.values]="values"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  values;
    
        constructor()
        {
            this.values = itemsArray; 
        }
     }

    dataSource.values.measures array

    This holds the list of unique names of measures to bind them from the OLAP cube.

    Default Value: []

    Example:

  • html
  • <ej-pivottreemap [dataSource.values]="values"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  values;
    
        constructor()
        {
            this.values = [{ measures: itemsArray }];
        }
     }

    dataSource.values.measures.fieldName string

    Allows the user to bind the measure from OLAP datasource by using its unique name as field name.

    Default Value: “”

    Example:

  • html
  • <ej-pivottreemap [dataSource.values]="values"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  values;
    
        constructor()
        {
            this.values = [{ measures: [{ fieldName: "MeasureUniqueName" }] }]; 
        }
     }

    dataSource.values.axis string

    Allows to set the axis name to place the measures items.

    Default Value: “rows”

    Example:

  • html
  • <ej-pivottreemap [dataSource.values]="values"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  values;
    
        constructor()
        {
            this.values = [{ axis : ej.olap.AxisName.Row }];
        }
     }

    dataSource.filters array

    Lists out the items which supports filtering of values without displaying the members in UI in PivotTreeMap.

    Default Value: []

    Example:

  • html
  • <ej-pivottreemap [dataSource.filters]="filters"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  filters;
    
        constructor()
        {
            this.filters = itemsArray; 
        }
     }

    dataSource.filters.fieldName string

    Allows the user to bind the item by using its unique name as field name.

    Default Value: “”

    Example:

  • html
  • <ej-pivottreemap [dataSource.filters]="filters"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  filters;
    
        constructor()
        {
           this.filters = [{ fieldName : "MyFieldName" }]; 
        }
     }

    dataSource.filters.filterItems object

    Applies filter to the field members.

    Default Value: null

    Example:

  • html
  • <ej-pivottreemap [dataSource.filters]="filters"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  filters;
    
        constructor()
        {
           this.filters = [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
        }
     }

    dataSource.filters.filterItems.values array

    Contains the collection of items to be excluded among the field members.

    Default Value: []

    Example:

  • html
  • <ej-pivottreemap [dataSource.filters]="filters"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  filters;
    
        constructor()
        {
           this.filters = [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }];
        }
     }

    customObject object

    Object utilized to pass additional information between client-end and service-end.

    Default Value: {}

    Example:

  • html
  • <ej-pivottreemap [customObject]="customObject"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  customObject;
    
            constructor()
            {
              this.customObject = { Language: "en-US" }; 
            }
     }

    isResponsive boolean

    Allows the user to enable PivotTreeMap’s responsiveness in the browser layout.

    Default Value: false

    Example:

  • html
  • <ej-pivottreemap [isResponsive]="true"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        //..
     }

    locale string

    Allows the user to set the localized language for the widget.

    Default Value: “en-US”

    Example:

  • html
  • <ej-pivottreemap locale="en-US"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        //..
     }

    operationalMode enum

    Sets the mode for the PivotTreeMap widget for binding data source either in server-side or client-side.

    Name Description
    ClientMode To bind data source completely from client-side.
    ServerMode To bind data source completely from server-side.

    Default Value: ej.Pivot.OperationalMode.ClientMode

    Example:

  • html
  • <ej-pivottreemap [operationalMode]="operationalMode"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        public  operationalMode;
    
            constructor()
            {
              this.operationalMode = ej.Pivot.OperationalMode.ServerMode; 
            }
     }

    Methods

    getJSONRecords()

    Returns the JSON records formed to render the control.

    Returns:

    array

    Example:

  • ts
  • export classPivotTreeMapComponent {
        
      ngAfterViewInit(){
    
         let treemapObj = $(".e-pivottreemap").data("ejPivotTreeMap");
         let jsonRecords = treeMapObj.getJSONRecords();
      }
     }

    setJSONRecords()

    Sets the JSON records to render the control.

    Example:

  • ts
  • export classPivotTreeMapComponent {
        
      ngAfterViewInit(){
    
         let treemapObj = $(".e-pivottreemap").data("ejPivotTreeMap");
         treeMapObj.setJSONRecords(jsonRecords);
      }
     }

    generateJSON()

    Renders the control with the pivot engine obtained from OLAP cube.

    Example:

  • ts
  • export classPivotTreeMapComponent {
        
      ngAfterViewInit(){
    
         let treemapObj = $(".e-pivottreemap").data("ejPivotTreeMap");
         treeMapObj.generateJSON(baseObj, pivotEngineObj);
      }
     }

    renderTreeMapFromJSON()

    This function receives the JSON formatted datasource to render the PivotTreeMap control.

    Example:

  • ts
  • export classPivotTreeMapComponent {
        
      ngAfterViewInit(){
    
         let treemapObj = $(".e-pivottreemap").data("ejPivotTreeMap");
         treeMapObj.renderTreeMapFromJSON(this.getJSONRecords());
      }
     }

    renderControlSuccess()

    This function receives the update from service-end, which would be utilized for rendering the widget.

    Example:

  • ts
  • export classPivotTreeMapComponent {
        
      ngAfterViewInit(){
    
         let treemapObj = $(".e-pivottreemap").data("ejPivotTreeMap");
         treeMapObj.renderControlSuccess({ "OlapReport": this.getOlapReport(), "JsonRecords": this.getJSONRecords() });
      }
     }

    destroy()

    This function Destroy the PivotTreemap widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

    Example:

  • ts
  • export classPivotTreeMapComponent {
        
      ngAfterViewInit(){
    
         let treemapObj = $(".e-pivottreemap").data("ejPivotTreeMap");
         treemapObj.destroy();
      }
     }

    Events

    load

    Triggers when PivotTreeMap starts to render.

    Event Parameters
    Name Type Description
    action string returns the current action of PivotTreeMap control.
    customObject object returns the custom object bound with PivotTreeMap control.
    element object returns the HTML element of PivotTreeMap control.

    Example:

  • html
  • <ej-pivottreemap (load)="load($event)"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        load(args){
             //Enter your code here.
        }
     }

    beforePivotEnginePopulate

    Triggers before populating the pivot engine from datasource.

    Event Parameters
    Name Type Description
    treeMapObject object returns the current instance of PivotTreeMap control.

    Example:

  • html
  • <ej-pivottreemap (beforePivotEnginePopulate)="beforePivotEnginePopulate($event)"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        beforePivotEnginePopulate(args){
             //Enter your code here.
        }
     }

    drillSuccess

    Triggers when drill up/down happens in PivotTreeMap control. And it returns the outer HTML of PivotTreeMap control.

    Event Parameters
    Name Type Description
    element object return the HTML element of PivotTreeMap control.

    Example:

  • html
  • <ej-pivottreemap (drillSuccess)="drillSuccess($event)"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        drillSuccess(args){
             //Enter your code here.
        }
     }

    renderComplete

    Triggers when PivotTreeMap widget completes all operations at client-side after any AJAX request.

    Event Parameters
    Name Type Description
    action string returns the current action of PivotTreeMap control.
    customObject object returns the custom object bound with PivotTreeMap control.
    element object returns the HTML element of PivotTreeMap control.

    Example:

  • html
  • <ej-pivottreemap (renderComplete)="renderComplete($event)"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        renderComplete(args){
             //Enter your code here.
        }
     }

    renderFailure

    Triggers when any error occurred during AJAX request.

    Event Parameters
    Name Type Description
    action string returns the current action of PivotTreeMap control.
    customObject object returns the custom object bound with PivotTreeMap control.
    element object returns the HTML element of PivotTreeMap control.
    message string returns the error stack trace of the original exception.

    Example:

  • html
  • <ej-pivottreemap (renderFailure)="renderFailure($event)"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        renderFailure(args){
             //Enter your code here.
        }
     }

    renderSuccess

    Triggers when PivotTreeMap successfully reaches client-side after any AJAX request.

    Event Parameters
    Name Type Description
    action string returns the current action of PivotTreeMap control.
    customObject object returns the custom object bound with PivotTreeMap control.
    element object returns the HTML element of PivotTreeMap control.

    Example:

  • html
  • <ej-pivottreemap (renderSuccess)="renderSuccess($event)"></ej-pivottreemap>
  • ts
  • export classPivotTreeMapComponent {
        
        renderSuccess(args){
             //Enter your code here.
        }
     }