| layout | post |
|---|---|
| title | How To |
| description | How To |
| platform | js |
| control | PivotTreeMap |
| documentation | ug |
| api | /api/js/ejpivottreemap |
The generateJSON method is used to render the control with the pivot engine obtained from the OLAP cube.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap(); var pivotTreemap = $("#PivotTreeMap1").data("ejPivotTreeMap"); pivotTreemap.generateJSON(baseObj, pivotEngineObj); </script>{% endhighlight %}
The doAjaxPost method is used to perform an asynchronous HTTP (AJAX) request.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap(); var pivotTreemap = $("#PivotTreeMap1").data("ejPivotTreeMap"); pivotTreemap.doAjaxPost("POST", "/PivotTreeMapService.svc/Initialize", { "key", "Hello World" }, successEvent, null); </script>{% endhighlight %}
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.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap(); var pivotTreemap = $("#PivotTreeMap1").data("ejPivotTreeMap"); pivotTreemap.destroy(); </script>{% endhighlight %}
The getJSONRecords method is used to return the JSON records that is formed to render the control.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap(); var pivotTreemap = $("#PivotTreeMap1").data("ejPivotTreeMap"); pivotTreemap.getJSONRecords(); </script>{% endhighlight %}
The setJSONRecords method is used to set the JSON records to render the pivot chart control.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap(); var pivotTreemap = $("#PivotTreeMap1").data("ejPivotTreeMap"); pivotTreemap.setJSONRecords(pivotTreemap.getJSONRecords()); </script>{% endhighlight %}
The renderTreeMapFromJSON method is used to render the PivotTreeMap component with JSON records available at that instant.
{% highlight html %}
<script> $("#ejPivotTreeMap1").ejPivotTreeMap(); var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap"); treeMapObj.renderTreeMapFromJSON(treeMapObj.getJSONRecords()); </script>{% endhighlight %}
You can get the current OLAP report along with axis information using the getOlapReport method.
{% highlight html %}
<script> $("#ejPivotTreeMap1").ejPivotTreeMap(); var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap"); var report = treeMapObj.getOlapReport(); </script>{% endhighlight %}
You can set the OLAP report along with axis information using the setOlapReport method.
{% highlight html %}
<script> $("#ejPivotTreeMap1").ejPivotTreeMap(); var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap"); var report = treeMapObj.setOlapReport(olapReportObj); </script>{% endhighlight %}
The doPostBack method is used to perform an asynchronous HTTP (AJAX) post operation.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap(); var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap"); treeMapObj.doPostBack("/PivotService/Initialize", { "key", "Hello World" }); </script>{% endhighlight %}
The renderControlSuccess method is used to receive the JSON records and report from the service, which is utilized for rendering the widget.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap(); var treeMapObj = $("#PivotTreeMap1").data("ejPivotTreeMap"); treeMapObj.renderControlSuccess({ "OlapReport": this.getOlapReport(), "JsonRecords": this.getJSONRecords() }); </script>{% endhighlight %}
The beforePivotEnginePopulate event is triggered before populating the pivot engine from the data source.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap({ beforePivotEnginePopulate: function (args) { }); </script>{% endhighlight %}
The afterServiceInvoke event is triggered when it is reached the client-side after any AJAX request.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap({ afterServiceInvoke: function (args) { }); </script>{% endhighlight %}
The beforeServiceInvoke event is triggered before any AJAX request is passed from the pivot tree map to service methods.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap({ beforeServiceInvoke: function (args) { }); </script>{% endhighlight %}
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.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap({ drillSuccess: function (args) { }); </script>{% endhighlight %}
The load event is triggered when the pivot tree map is started to render.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap({ load: function (args) { }); </script>{% endhighlight %}
The renderSuccess event is triggered when the AJAX request returns successfully at the client-side.
{% highlight javascript %}
$("#PivotTreeMap1").ejPivotTreeMap({
//render success event
renderSuccess: function(args) {
},
//...
});
{% endhighlight %}
The renderComplete event is triggered after the pivot tree map is rendered completely.
{% highlight javascript %}
$("#PivotTreeMap1").ejPivotTreeMap({
//render complete event
renderComplete: function(args) {
},
//...
});
{% endhighlight %}
The renderFailure event is triggered when any error occurred during the AJAX request.
{% highlight javascript %}
$("#PivotTreeMap1").ejPivotTreeMap({
//render complete event
renderFailure: function(args) {
},
//...
});
{% endhighlight %}
You can enable/disable the responsiveness in the browser layout for pivot tree map control by setting the isResponsive property.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap({ isResponsive: true }); </script>{% endhighlight %}
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.
{% highlight html %}
<script> $("#PivotTreeMap1").ejPivotTreeMap({ enableXHRCredentials: true }); </script>{% endhighlight %}
You can render the pivot tree map with one of the available built-in themes by using the cssClass property.
{% highlight html %}
<script type="text/javascript">
$(function() {
$("#PivotTreeMap1").ejPivotTreeMap({
cssClass: "gradient-lime"
});
});
</script>
{% endhighlight %}
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. |