How To in JQuery PivotGauge widget

Public methods

Refresh the pivot gauge at client mode

The refresh method is used to refresh the pivot gauge at client-side itself.

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var gaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        gaugeObj.refresh();
    </script>

    Removing KPI images from pivot gauge

    The removeImg method is used to remove the KPI related images from the pivot gauge when binding the OLAP data source.

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var gaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        gaugeObj.removeImg();
    </script>

    Getting JSON data to render with OLAP data source

    The getJSONData method is used to return the JSON records required to render the pivot gauge when performing any action with the OLAP data source.

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var gaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        var args = { action : "initialize", activeObject : gaugeObj };
        var jsonData = gaugeObj.getJSONData(args, dataSource);
    </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="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var gaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        var jsonRecords = gaugeObj.getJSONRecords();
    </script>

    Setting JSON records to control object

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

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var gaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        gaugeObj.setJSONRecords(gaugeObj.getJSONRecords());
    </script>

    Destroying the object of pivot gauge

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

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var gaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        gaugeObj.destroy();
    </script>

    Explicit asynchronous invoke

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

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var gaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        gaugeObj.doAjaxPost("POST", "/PivotService/Initialize", { "key", "Hello World" }, "renderControlSuccess", null);
    </script>

    Rendering the widget with predefined JSON records

    The renderControlFromJSON method is used to render the PivotGauge component with predefined JSON records available at that instant.

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var pivotGaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        pivotGaugeObj.renderControlFromJSON({ this.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="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var pivotGaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        var report = pivotGaugeObj.getOlapReport();
    </script>

    Setting the OLAP report

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

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGrid();
        var pivotGaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        var report = pivotGaugeObj.setOlapReport(olapReportObj);
    </script>

    Destroying the object of PivotGauge

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

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge();
        var pivotGaugeObj = $("#PivotGauge1").data("ejPivotGauge");
        pivotGaugeObj.destroy();
    </script>

    Events

    Triggering event before the pivot gauge loaded

    The load event is triggered when the pivot gauge is started loading at client-side.

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge({
    
            // load event
            load: function (args) {
    
            }
    
        });
    </script>

    Invoking event before pivot engine population

    The beforePivotEnginePopulate event is triggered before populating the pivot engine when operating in client mode.

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge({
    
            // before pivot engine populate event
            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="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge({
    
            // after service invoke event
            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 gauge to service methods.

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge({
    
            // before service invoke event
            beforeServiceInvoke: function (args) {}
    
        });
    </script>

    Triggering event on successful completion of AJAX request

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

  • javascript
  • $("#PivotGauge1").ejPivotGauge({
    
                //render success event
                renderSuccess: function(args) {
    
                },
    
                //...
            });

    Triggering event after the control rendered

    The renderComplete event is triggered after the pivot client is rendered completely.

  • javascript
  • $("#PivotGauge1").ejPivotGauge({
    
                //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
  • $("#PivotGauge1").ejPivotGauge({
    
                //render complete event
                renderFailure: function(args) {
    
                },
    
                //...
            });

    Members

    Showing header label in pivot gauge

    You can show/hide the header label in the pivot gauge by the showHeaderLabel property.

  • html
  • <div id="PivotGauge1"></div>
    
    <script>
        $("#PivotGauge1").ejPivotGauge({
    
            showHeaderLabel: 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="PivotGauge1"></div>
    
    <script type="text/javascript">
        $("#PivotGauge1").ejPivotGauge({
    
            enableXHRCredentials: true
    
        });
    </script>

    Setting custom theme

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

  • html
  • <script type="text/javascript">
            $(function() {
                $("#PivotGauge1").ejPivotGauge({
                  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.