- Generate JSON object from OLAP cube
- Explicit asynchronous invoke
- Destroying object of pivot tree map component
- Getting JSON records from control object
- Setting JSON records to control object
- Rendering the widget with predefined JSON records
- Getting the current OLAP report
- Setting the OLAP report
- Explicit asynchronous post
- Rendering the widget using JSON records and report
- Invoking event before pivot engine population
- Invoking event in client-side after service invoke
- Invoking event in client-side before service invoke
- Triggering event after performing drill operation
- Triggering event before the pivot tree map loaded
- Triggering event on successful completion of AJAX request
- Triggering event after the control rendered
- Triggering event on failure of AJAX request
Contact Support
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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
$("#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.
$("#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.
$("#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.
<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.
<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.
<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. |