How To in JQuery PivotTreeMap widget

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.