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.

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) {}
        });