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

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent { //.. }

{% endhighlight %}

• 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}

Specifies the CSS class to PivotTreeMap to achieve custom theme.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent { //.. }

{% endhighlight %}

{:#members:datasource}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource]="dataSource">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  dataSource;

    constructor()
    {
      this.dataSource = { data: value }; 
    }

}

{% endhighlight %}

{:#members:datasource-data}

Provides the raw data source for the PivotTreeMap.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent { //.. }

{% endhighlight %}

{:#members:datasource-cube}

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

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent { //.. }

{% endhighlight %}

{:#members:datasource-sourceinfo}

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

Note: This is applicable only for Mondrian connection.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent { //.. }

{% endhighlight %}

{:#members:datasource-providername}

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.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent { //.. }

{% endhighlight %}

{:#members:datasource-catalog}

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

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent { //.. }

{% endhighlight %}

{:#members:datasource-columns}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  columns;

constructor()
{
    this.columns = itemsArray; 
}

}

{% endhighlight %}

{:#members:datasource-columns-fieldname}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName : "MyFieldName" }]; 
}

}

{% endhighlight %}

{:#members:datasource-columns-isnamedsets}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName: "[Core Product Group]", isNamedSets : true }]; 
}

}

{% endhighlight %}

{:#members:datasource-columns-filteritems}

Applies filter to the field members.

Example:

{% highlight html %} <ej-pivottreemap [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-columns-filteritems-values}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  rows;

constructor()
{
    this.rows = itemsArray; 
}

}

{% endhighlight %}

{:#members:datasource-rows-fieldname}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName : "MyFieldName" }];
}

}

{% endhighlight %}

{:#members:datasource-rows-isnamedsets}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName: "[Core Product Group]", isNamedSets : true }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows-filteritems}

Applies filter to the field members.

Example:

{% highlight html %} <ej-pivottreemap [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows-filteritems-values}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-values}

Lists out the items supports calculation in PivotTreeMap.

Example:

{% highlight html %} <ej-pivottreemap [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  values;

constructor()
{
    this.values = itemsArray; 
}

}

{% endhighlight %}

{:#members:datasource-values-measures}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  values;

constructor()
{
    this.values = [{ measures: itemsArray }];
}

}

{% endhighlight %}

{:#members:datasource-values-measures-fieldName}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  values;

constructor()
{
    this.values = [{ measures: [{ fieldName: "MeasureUniqueName" }] }]; 
}

}

{% endhighlight %}

{:#members:datasource-values-axis}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  values;

constructor()
{
    this.values = [{ axis : ej.olap.AxisName.Row }];
}

}

{% endhighlight %}

{:#members:datasource-filters}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.filters]="filters">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  filters;

constructor()
{
    this.filters = itemsArray; 
}

}

{% endhighlight %}

{:#members:datasource-filters-fieldname}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.filters]="filters">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  filters;

constructor()
{
   this.filters = [{ fieldName : "MyFieldName" }]; 
}

}

{% endhighlight %}

{:#members:datasource-filters-filteritems}

Applies filter to the field members.

Example:

{% highlight html %} <ej-pivottreemap [dataSource.filters]="filters">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  filters;

constructor()
{
   this.filters = [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-filters-filteritems-values}

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

Example:

{% highlight html %} <ej-pivottreemap [dataSource.filters]="filters">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  filters;

constructor()
{
   this.filters = [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }];
}

}

{% endhighlight %}

{:#members:customobject}

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

Example:

{% highlight html %} <ej-pivottreemap [customObject]="customObject">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  customObject;

    constructor()
    {
      this.customObject = { Language: "en-US" }; 
    }

}

{% endhighlight %}

{:#members:isresponsive}

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

Example:

{% highlight html %} <ej-pivottreemap [isResponsive]="true">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent { //.. }

{% endhighlight %}

{:#members:locale}

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

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent { //.. }

{% endhighlight %}

{:#members:operationalmode}

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

Example:

{% highlight html %} <ej-pivottreemap [operationalMode]="operationalMode">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

public  operationalMode;

    constructor()
    {
      this.operationalMode = ej.Pivot.OperationalMode.ServerMode; 
    }

}

{% endhighlight %}

{:#methods:getjsonrecords}

Returns the JSON records formed to render the control.

array

Example:

{% highlight ts %}

export classPivotTreeMapComponent {

ngAfterViewInit(){

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

} }

{% endhighlight %}

{:#methods:setjsonrecords}

Sets the JSON records to render the control.

Example:

{% highlight ts %}

export classPivotTreeMapComponent {

ngAfterViewInit(){

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

} }

{% endhighlight %}

{:#methods:generatejson}

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

Example:

{% highlight ts %}

export classPivotTreeMapComponent {

ngAfterViewInit(){

 let treemapObj = $(".e-pivottreemap").data("ejPivotTreeMap");
 treeMapObj.generateJSON(baseObj, pivotEngineObj);

} }

{% endhighlight %}

{:#methods:rendertreemapfromjson}

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

Example:

{% highlight ts %}

export classPivotTreeMapComponent {

ngAfterViewInit(){

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

} }

{% endhighlight %}

{:#methods:rendercontrolsuccess}

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

Example:

{% highlight ts %}

export classPivotTreeMapComponent {

ngAfterViewInit(){

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

} }

{% endhighlight %}

{:#methods: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:

{% highlight ts %}

export classPivotTreeMapComponent {

ngAfterViewInit(){

 let treemapObj = $(".e-pivottreemap").data("ejPivotTreeMap");
 treemapObj.destroy();

} }

{% endhighlight %}

{:#events:load}

Triggers when PivotTreeMap starts to render.

Example:

{% highlight html %} <ej-pivottreemap (load)="load($event)">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

load(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:beforepivotenginepopulate}

Triggers before populating the pivot engine from datasource.

Example:

{% highlight html %} <ej-pivottreemap (beforePivotEnginePopulate)="beforePivotEnginePopulate($event)">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

beforePivotEnginePopulate(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:drillsuccess}

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

Example:

{% highlight html %} <ej-pivottreemap (drillSuccess)="drillSuccess($event)">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

drillSuccess(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:rendercomplete}

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

Example:

{% highlight html %} <ej-pivottreemap (renderComplete)="renderComplete($event)">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

renderComplete(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:renderfailure}

Triggers when any error occurred during AJAX request.

Example:

{% highlight html %} <ej-pivottreemap (renderFailure)="renderFailure($event)">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

renderFailure(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:rendersuccess}

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

Example:

{% highlight html %} <ej-pivottreemap (renderSuccess)="renderSuccess($event)">

{% endhighlight %}

{% highlight ts %}

export classPivotTreeMapComponent {

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

}

{% endhighlight %}