How to

10 Oct 201810 minutes to read

Generate JSON object from OLAP cube

The generateJSON method is used to render the control with the pivot engine obtained from the OLAP cube.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap();
    var pivotTreemap = $("#PivotTreeMap1").data("ejPivotTreeMap");
    pivotTreemap.generateJSON(baseObj, pivotEngineObj);
</script>

Explicit asynchronous invoke

The doAjaxPost method is used to perform an asynchronous HTTP (AJAX) request.

HTML

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

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

Destroying object of pivot tree map component

The destroy method is used to destroy the pivot chart widget associated events that are bound using “this._on” and bring the control to pre-init state.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap();
    var pivotTreemap = $("#PivotTreeMap1").data("ejPivotTreeMap");
    pivotTreemap.destroy();
</script>

Getting JSON records from control object

The getJSONRecords method is used to return the JSON records that is formed to render the control.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap();
    var pivotTreemap = $("#PivotTreeMap1").data("ejPivotTreeMap");
    pivotTreemap.getJSONRecords();
</script>

Setting JSON records to control object

The setJSONRecords method is used to set the JSON records to render the pivot chart control.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap();
    var pivotTreemap = $("#PivotTreeMap1").data("ejPivotTreeMap");
    pivotTreemap.setJSONRecords(pivotTreemap.getJSONRecords());
</script>

Rendering the widget with predefined JSON records

The renderTreeMapFromJSON method is used to render the PivotTreeMap component with JSON records available at that instant.

HTML

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

<script>
    $("#ejPivotTreeMap1").ejPivotTreeMap();
    var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treeMapObj.renderTreeMapFromJSON(treeMapObj.getJSONRecords());
</script>

Getting the current OLAP report

You can get the current OLAP report along with axis information using the getOlapReport method.

HTML

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

<script>
    $("#ejPivotTreeMap1").ejPivotTreeMap();
    var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    var report = treeMapObj.getOlapReport();

</script>

Setting the OLAP report

You can set the OLAP report along with axis information using the setOlapReport method.

HTML

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

<script>
    $("#ejPivotTreeMap1").ejPivotTreeMap();
    var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    var report = treeMapObj.setOlapReport(olapReportObj);
</script>

Explicit asynchronous post

The doPostBack method is used to perform an asynchronous HTTP (AJAX) post operation.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap();
    var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treeMapObj.doPostBack("/PivotService/Initialize", { "key", "Hello World" });
</script>

Rendering the widget using JSON records and report

The renderControlSuccess method is used to receive the JSON records and report from the service, which is utilized for rendering the widget.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap();
    var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap");
    treeMapObj.renderControlSuccess({ "OlapReport": this.getOlapReport(), "JsonRecords": this.getJSONRecords() });
</script>

Invoking event before pivot engine population

The beforePivotEnginePopulate event is triggered before populating the pivot engine from the data source.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap({

       beforePivotEnginePopulate: function (args) {

    });
</script>

Invoking event in client-side after service invoke

The afterServiceInvoke event is triggered when it is reached the client-side after any AJAX request.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap({

       afterServiceInvoke: function (args) {

    });
</script>

Invoking event in client-side before service invoke

The beforeServiceInvoke event is triggered before any AJAX request is passed from the pivot tree map to service methods.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap({

       beforeServiceInvoke: function (args) {

    });
</script>

Triggering event after performing drill operation

The drillSuccess event is triggered when drill up/down operation is performed in the pivot tree map control, and it returns the outer HTML of the pivot tree map control.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap({

       drillSuccess: function (args) {

    });
</script>

Triggering event before the pivot tree map loaded

The load event is triggered when the pivot tree map is started to render.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap({

       load: function (args) {

    });
</script>

Triggering event on successful completion of AJAX request

The renderSuccess event is triggered when the AJAX request returns successfully at the client-side.

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({

            //render success event
            renderSuccess: function(args) {

            },

            //...
        });

Triggering event after the control rendered

The renderComplete event is triggered after the pivot tree map is rendered completely.

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({

            //render complete event
            renderComplete: function(args) {

            },

            //...
        });

Triggering event on failure of AJAX request

The renderFailure event is triggered when any error occurred during the AJAX request.

JAVASCRIPT

$("#PivotTreeMap1").ejPivotTreeMap({

            //render complete event
            renderFailure: function(args) {

            },

            //...
        });

Members

Responsive layout of pivot tree map component

You can enable/disable the responsiveness in the browser layout for pivot tree map control by setting the isResponsive property.

HTML

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

<script>
    $("#PivotTreeMap1").ejPivotTreeMap({

       isResponsive: true

    });
</script>

Enabling XMLHttpRequest object for CORS

Allows you to enable the “withCredentials” property in the XMLHttpRequest object for CORS(Cross-Origin Resource Sharing) request. This feature can be enabled by using the enableXHRCredentials property.

HTML

<div id="PivotTreeMap1" type="text/javascript"></div>

<script>
    $("#PivotTreeMap1").ejPivotTreeMap({

       enableXHRCredentials: true

    });
</script>

Setting custom theme

You can render the pivot tree map with one of the available built-in themes by using the cssClass property.

HTML

<script type="text/javascript">
        $(function() {
            $("#PivotTreeMap1").ejPivotTreeMap({
              cssClass: "gradient-lime"
            });

        });

    </script>

Setting custom name to service methods

The serviceMethodSettings allows you to set the custom name for methods in the WebAPI/WCF, communicated during the AJAX post. The following table will explain the service methods:

Service methods	Description
initialize	It fetches the required data to initialize the control.
drillDown	It allows drilling up/down action in the pivot tree map.