ejPivotTreeMap

2 May 201823 minutes to read

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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:

export classPivotTreeMapComponent {
    
  ngAfterViewInit(){

     let treemapObj = $(".e-pivottreemap").data("ejPivotTreeMap");
     let jsonRecords = treeMapObj.getJSONRecords();
  }
 }

setJSONRecords()

Sets the JSON records to render the control.

Example:

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:

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:

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:

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:

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>

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>

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>

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>

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>

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>

export classPivotTreeMapComponent {
    
    renderSuccess(args){
         //Enter your code here.
    }
 }

ejPivotTreeMap

Example

Requires

Members

cssClass string

Default Value: “”

dataSource object

Default Value: {}

dataSource.data object

Default Value: null

dataSource.cube string

Default Value: “”

dataSource.sourceInfo string

Default Value: “”

dataSource.providerName string

Default Value: “ssas”

dataSource.catalog string

Default Value: “”

dataSource.columns array

Default Value: []

dataSource.columns.fieldName string

Default Value: “”

dataSource.columns.isNamedSets boolean

Default Value: false

dataSource.columns.filterItems object

Default Value: null

dataSource.columns.filterItems.values array

Default Value: []

dataSource.rows array

Default Value: []

dataSource.rows.fieldName string

Default Value: “”

dataSource.rows.isNamedSets boolean

Default Value: false

dataSource.rows.filterItems object

Default Value: null

dataSource.rows.filterItems.values array

Default Value: []

dataSource.values array

Default Value: []

dataSource.values.measures array

Default Value: []

dataSource.values.measures.fieldName string

Default Value: “”

dataSource.values.axis string

Default Value: “rows”

dataSource.filters array

Default Value: []

dataSource.filters.fieldName string

Default Value: “”

dataSource.filters.filterItems object

Default Value: null

dataSource.filters.filterItems.values array

Default Value: []

customObject object

Default Value: {}

isResponsive boolean

Default Value: false

locale string

Default Value: “en-US”

operationalMode enum

Default Value: ej.Pivot.OperationalMode.ClientMode

Methods

getJSONRecords()

Returns:

setJSONRecords()

generateJSON()

renderTreeMapFromJSON()

renderControlSuccess()

destroy()

Events

load

beforePivotEnginePopulate

drillSuccess

renderComplete

renderFailure

renderSuccess

cssClass `string`

dataSource `object`

dataSource.data `object`

dataSource.cube `string`

dataSource.sourceInfo `string`

dataSource.providerName `string`

dataSource.catalog `string`

dataSource.columns `array`

dataSource.columns.fieldName `string`

dataSource.columns.isNamedSets `boolean`

dataSource.columns.filterItems `object`

dataSource.columns.filterItems.values `array`

dataSource.rows `array`

dataSource.rows.fieldName `string`

dataSource.rows.isNamedSets `boolean`

dataSource.rows.filterItems `object`

dataSource.rows.filterItems.values `array`

dataSource.values `array`

dataSource.values.measures `array`

dataSource.values.measures.fieldName `string`

dataSource.values.axis `string`

dataSource.filters `array`

dataSource.filters.fieldName `string`

dataSource.filters.filterItems `object`

dataSource.filters.filterItems.values `array`

customObject `object`

isResponsive `boolean`

locale `string`

operationalMode `enum`