ejPivotTreeMap

24 May 201918 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.

Syntax

JAVASCRIPT

$(element).ejPivotTreeMap()

Example

HTML

<div id="PivotTreeMap1"></div>

    <script>
        //Create PivotTreeMap
        $("#PivotTreeMap1").ejPivotTreeMap(...);
    </script>

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ cssClass : "gradient-lime" });

dataSource `object`

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

Default Value: {}

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap( { dataSource: { data: value } });

dataSource.data `object`

Provides the raw data source for the PivotTreeMap.

Default Value: null

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { data: value } });

dataSource.cube `string`

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { cube: "Adventure Works" } });

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap( { dataSource: { sourceInfo: "Provider Mondrian" } });

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap( { dataSource: { providerName: "mondrian" } });

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap( { dataSource: { catalog: "databaseName" } } );

dataSource.columns `array`

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

Default Value: []

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { columns: itemsArray } });

dataSource.columns.fieldName `string`

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { columns: [{ fieldName : "HierarchyUniqueName" }] } });

dataSource.columns.isNamedSets `boolean`

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

Default Value: false

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { columns: [{ fieldName: "[Core Product Group]", isNamedSets : true }] } });

dataSource.columns.filterItems `object`

Applies filter to the field members.

Default Value: null

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { columns: [{ fieldName: "[Customer].[Customer Geography]", filterItems : { filterType: ej.PivotAnalysis.FilterType.Include, values: ["Canada", "France"] } }] } });

dataSource.columns.filterItems.values `array`

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

Default Value: []

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { columns: [{ fieldName: "[Customer].[Customer Geography]", filterItems : { filterType: ej.PivotAnalysis.FilterType.Include, values: ["Canada", "France"] } }] } });

dataSource.rows `array`

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

Default Value: []

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { rows: itemsArray } });

dataSource.rows.fieldName `string`

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { rows: [{ fieldName : "HierarchyUniqueName" }] } });

dataSource.rows.isNamedSets `boolean`

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

Default Value: false

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { rows: [{ fieldName: "[Core Product Group]", isNamedSets : true }] } });

dataSource.rows.filterItems `object`

Applies filter to the field members.

Default Value: null

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { rows: [{ fieldName: "[Customer].[Customer Geography]", filterItems : { filterType: ej.PivotAnalysis.FilterType.Include, values: ["Canada", "France"] } }] } });

dataSource.rows.filterItems.values `array`

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

Default Value: []

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { rows: [{ fieldName: "[Customer].[Customer Geography]", filterItems : { filterType: ej.PivotAnalysis.FilterType.Include, values: ["Canada", "France"] } }] } });

dataSource.values `array`

Lists out the items supports calculation in PivotTreeMap.

Default Value: []

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { 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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { 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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { values: [{ measures : [{ fieldName: "MeasureUniqueName" }] }] } });

dataSource.values.axis `string`

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

Default Value: “rows”

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { 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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { filters: itemsArray } });

dataSource.filters.fieldName `string`

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { filters: [{ fieldName : "HierarchyUniqueName" }] } });

dataSource.filters.filterItems `object`

Applies filter to the field members.

Default Value: null

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { filters: [{ fieldName: "[Customer].[Customer Geography]", filterItems : { filterType: ej.PivotAnalysis.FilterType.Include, values: ["Canada", "France"] } }] } });

dataSource.filters.filterItems.values `array`

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

Default Value: []

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ dataSource: { filters: [{ fieldName: "[Customer].[Customer Geography]", filterItems : { filterType: ej.PivotAnalysis.FilterType.Include, values: ["Canada", "France"] } }] } });

customObject `object`

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

Default Value: {}

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ customObject: { "key": "Hello World" } });

isResponsive `boolean`

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

Default Value: false

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ isResponsive: true });

locale `string`

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

Default Value: “en-US”

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ locale: "fr-FR" });

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ operationalMode: ej.Pivot.OperationalMode.ServerMode });

serviceMethodSettings `object`

Allows the user to set custom name for the methods at service-end, communicated on AJAX post.

Default Value: {}

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ serviceMethodSettings: values });

serviceMethodSettings.initialize `string`

Allows the user to set the custom name for the service method responsible for initializing PivotTreeMap.

Default Value: “InitializeTreemap”

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ serviceMethodSettings: { initialize: "InitializeTreeMapMyMethod" } });

serviceMethodSettings.drillDown `string`

Allows the user to set the custom name for the service method responsible for drilling up/down operation in PivotTreeMap.

Default Value: “DrillTreeMap”

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ serviceMethodSettings: { drillDown: "DrillTreeMapMyMethod" } });

url `string`

Connects the service using the specified URL for any server updates.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({ url: "/PivotTreeMapService" });

enableXHRCredentials `boolean`

Allows you to enable “withCredentials” property inside XMLHttpRequest object for CORS(Cross-Origin Resource Sharing) request.

Default Value: false

Example:

JAVASCRIPT

$("#PivotTreeMap").ejPivotTreeMap({ enableXHRCredentials: true });

Methods

doAjaxPost()

Performs an asynchronous HTTP (AJAX) request.

Example:

JAVASCRIPT

var treemapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treemapObj.doAjaxPost("POST", "/PivotTreeMapService.svc/Initialize", { "key", "Hello World" }, successEvent, null);

doPostBack()

Performs an asynchronous HTTP (FullPost) submit.

Example:

JAVASCRIPT

var treemapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treemapObj.doPostBack("/OlapService/Initialize", { "key", "Hello World" });

getOlapReport()

Returns the OlapReport string maintained along with the axis elements information.

Returns:

string

Note: This method is applicable only on operating the control in server mode.

Example:

JAVASCRIPT

var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    var report = treeMapObj.getOlapReport();

setOlapReport()

Sets the OlapReport string along with the axis information and maintains it in a property.

Note: This method is applicable only on operating the control in server mode.

Example:

JAVASCRIPT

var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treeMapObj.setOlapReport(olapReportObj);

getJSONRecords()

Returns the JSON records formed to render the control.

Returns:

array

Example:

JAVASCRIPT

var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    var jsonRecords = treeMapObj.getJSONRecords();

setJSONRecords()

Sets the JSON records to render the control.

Example:

JAVASCRIPT

var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treeMapObj.setJSONRecords(jsonRecords);

generateJSON()

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

Example:

JAVASCRIPT

var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treeMapObj.generateJSON(baseObj, pivotEngineObj);

renderTreeMapFromJSON()

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

Example:

JAVASCRIPT

var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treeMapObj.renderTreeMapFromJSON(this.getJSONRecords());

renderControlSuccess()

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

Example:

JAVASCRIPT

var treeMapObj = $("#PivotTreeMap1").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:

JAVASCRIPT

var treemapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treemapObj.destroy();

Events

afterServiceInvoke

Triggers when it 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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({
        afterServiceInvoke: function (args) {}
    });

beforeServiceInvoke

Triggers before any AJAX request is passed from PivotTreeMap to service methods.

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({
        beforeServiceInvoke: function (args) {}
    });

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({
        load: function (args) {}
    });

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({
        drillSuccess: function (args) {}
    });

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({
        renderComplete: function (args) {}
    });

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({
        renderFailure: function (args) {}
    });

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:

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({
        renderSuccess: function (args) {}
    });

ejPivotTreeMap

Syntax

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

serviceMethodSettings object

Default Value: {}

serviceMethodSettings.initialize string

Default Value: “InitializeTreemap”

serviceMethodSettings.drillDown string

Default Value: “DrillTreeMap”

url string

Default Value: “”

enableXHRCredentials boolean

Default Value: false

Methods

doAjaxPost()

doPostBack()

getOlapReport()

Returns:

setOlapReport()

getJSONRecords()

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`

serviceMethodSettings `object`

serviceMethodSettings.initialize `string`

serviceMethodSettings.drillDown `string`

url `string`

enableXHRCredentials `boolean`