How to

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.