The PivotChart is a lightweight control that reads OLAP and Relational information and visualizes it in graphical format with the ability to drill up and down.

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class AppComponent { //.. }

{% endhighlight %}

• module:jQuery-3.0.0.min.js
• module:ej.core.js
• module:ej.data.js
• module:ej.touch.js
• module:ej.dialog.js
• module:ej.draggable.js
• module:ej.waitingpopup.js
• module:ej.chart.js
• module:ej.pivot.common.js
• module:ej.olap.base.js
• module:ej.pivotanalysis.base.js
• module:ej.pivotchart.js

{:#members:analysismode}

Sets the mode for the PivotChart widget for binding either OLAP or Relational data source.

Example:

{% highlight html %} <ej-pivotchart [analysisMode]="analysisMode">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  analysisMode;

    constructor()
    {
      this.analysisMode = ej.Pivot.AnalysisMode.Olap; 
    }

}

{% endhighlight %}

{:#members:cssclass}

Specifies the CSS class to PivotChart to achieve custom theme.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:zooming}

Options for enabling zooming feature of PivotChart.

Example:

{% highlight html %} <ej-pivotchart [zooming]="zooming">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  zooming;

    constructor()
    {
      this.zooming = { enableScrollbar: true }; 
    }

}

{% endhighlight %}

{:#members:zooming-enablescrollbar}

Enables or disables horizontal scrollbar.

Example:

{% highlight html %} <ej-pivotchart [zooming.enableScrollbar]="true">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:commonseriesoptions}

Options available to configure the properties of entire series. You can also override the options for specific series by using series collection.

Example:

{% highlight html %} <ej-pivotchart [commonSeriesOptions]="commonSeriesOptions">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  commonSeriesOptions;

    constructor()
    {
      this.commonSeriesOptions = { type: ej.PivotChart.ChartTypes.Line }; 
    }

}

{% endhighlight %}

{:#members:commonseriesoptions-type}

Allows the user to set the specific chart type for PivotChart widget.

Example:

{% highlight html %} <ej-pivotchart [commonSeriesOptions.type]="type">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  type;

    constructor()
    {
      this.type = ej.PivotChart.ChartTypes.Line; 
    }

}

{% endhighlight %}

{:#members:datasource}

Initializes the data source for the PivotChart widget, when it functions completely on client-side.

Example:

{% highlight html %} <ej-pivotchart [dataSource]="dataSource">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  dataSource;

    constructor()
    {
      this.dataSource = { data: value }; 
    }

}

{% endhighlight %}

{:#members:datasource-cube}

Contains the respective cube name from OLAP database as string type.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:datasource-sourceinfo}

To set the data source name to fetch data from that.

Note: This is applicable only for Mondrian connection.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:datasource-providername}

Set the provider name for PivotChart to identify whether the provider is SSAS or Mondrian.

Note: This is applicable only for client side OLAP data.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:datasource-data}

Provides the raw data source for the PivotChart.

Example:

{% highlight html %} <ej-pivotchart [dataSource.data]="data">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  data;

    constructor()
    {
      this.data = "http://bi.syncfusion.com/olap/msmdpump.dll"; 
    }

}

{% endhighlight %}

{:#members:datasource-catalog}

In connection with an OLAP database, this property contains the database name as string to fetch the data from the given connection string.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:datasource-columns}

Lists out the items to be displayed as series of PivotChart.

Example:

{% highlight html %} <ej-pivotchart [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  columns;

constructor()
{
    this.columns = itemsArray; 
}

}

{% endhighlight %}

{:#members:datasource-columns-fieldname}

Allows the user to bind the item by using its unique name as field name.

Example:

{% highlight html %} <ej-pivotchart [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName : "MyFieldName" }]; 
}

}

{% endhighlight %}

{:#members:datasource-columns-fieldcaption}

Allows the user to set the display caption for an item.

Example:

{% highlight html %} <ej-pivotchart [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldCaption : "MyFieldCaption" }];
}

}

{% endhighlight %}

{:#members:datasource-columns-isnamedsets}

Allows the user to indicate whether the added item is a named set or not.

Note: This is only applicable for OLAP datasource.

Example:

{% highlight html %} <ej-pivotchart [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName: "[Core Product Group]", isNamedSets : true }]; 
}

}

{% endhighlight %}

{:#members:datasource-columns-sortorder}

Allows the user to set the sorting order of the members of the field.

Note: This is applicable for Relational datasource only.

Example:

{% highlight html %} <ej-pivotchart [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName: "Country", sortOrder: ej.PivotAnalysis.SortOrder.Descending }];
}

}

{% endhighlight %}

{:#members:datasource-columns-filteritems}

Applies filter to the field members.

Example:

{% highlight html %} <ej-pivotchart [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-columns-filteritems-filtertype}

Sets the type of filter whether to include/exclude the mentioned values.

Note: This is applicable for Relational datasource only.

Example:

{% highlight html %} <ej-pivotchart [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Include, values: valueArray } }] }]; 
}

}

{% endhighlight %}

{:#members:datasource-columns-filteritems-values}

Contains the collection of items to be included/excluded among the field members.

Example:

{% highlight html %} <ej-pivotchart [dataSource.columns]="columns">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  columns;

constructor()
{
    this.columns = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows}

Lists out the items to be displayed as segments of PivotChart.

Example:

{% highlight html %} <ej-pivotchart [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  rows;

constructor()
{
    this.rows = itemsArray; 
}

}

{% endhighlight %}

{:#members:datasource-rows-fieldname}

Allows the user to bind the item by using its unique name as field name.

Example:

{% highlight html %} <ej-pivotchart [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName : "MyFieldName" }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows-fieldcaption}

Allows the user to set the display caption for an item.

Example:

{% highlight html %} <ej-pivotchart [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldCaption : "MyFieldCaption" }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows-isnamedsets}

Allows the user to indicate whether the added item is a named set or not.

Note: This is only applicable for OLAP datasource.

Example:

{% highlight html %} <ej-pivotchart [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName: "[Core Product Group]", isNamedSets : true }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows-sortorder}

Allows the user to set the sorting order of the members of the field.

Note: This is applicable for Relational datasource only.

Example:

{% highlight html %} <ej-pivotchart [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName: "Country", sortOrder: ej.PivotAnalysis.SortOrder.Descending }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows-filteritems}

Applies filter to the field members.

Example:

{% highlight html %} <ej-pivotchart [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows-filteritems-filtertype}

Sets the type of filter whether to include/exclude the mentioned values.

Note: This is applicable for Relational datasource only.

Example:

{% highlight html %} <ej-pivotchart [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Include, values: valueArray } }] }]; 
}

}

{% endhighlight %}

{:#members:datasource-rows-filteritems-values}

Contains the collection of items to be included/excluded among the field members.

Example:

{% highlight html %} <ej-pivotchart [dataSource.rows]="rows">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  rows;

constructor()
{
    this.rows = [{ fieldName: "Country", filterItems: { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-values}

Lists out the items supports calculation in PivotChart.

Example:

{% highlight html %} <ej-pivotchart [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  values;

constructor()
{
    this.values = itemsArray; 
}

}

{% endhighlight %}

{:#members:datasource-values-fieldname}

Allows the user to bind the item by using its unique name as field name for Relational datasource.

Example:

{% highlight html %} <ej-pivotchart [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  values;

constructor()
{
    this.values = [{ fieldName : "MyFieldName" }]; 
}

}

{% endhighlight %}

{:#members:datasource-values-fieldcaption}

Allows the user to set the display caption for an item for Relational datasource.

Example:

{% highlight html %} <ej-pivotchart [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  values;

constructor()
{
    this.values = [{ fieldCaption : "MyFieldCaption" }];
}

}

{% endhighlight %}

{:#members:datasource-values-measures}

This holds the list of unique names of measures to bind them from the OLAP cube.

Example:

{% highlight html %} <ej-pivotchart [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  values;

constructor()
{
    this.values = [{ measures: itemsArray }];
}

}

{% endhighlight %}

{:#members:datasource-values-measures-fieldName}

Allows the user to bind the measure from OLAP datasource by using its unique name as field name.

Example:

{% highlight html %} <ej-pivotchart [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  values;

constructor()
{
    this.values = [{ measures: [{ fieldName: "MeasureUniqueName" }] }]; 
}

}

{% endhighlight %}

{:#members:datasource-values-axis}

Allows to set the axis name to place the measures items.

Note: This is applicable for OLAP datasource only.

Example:

{% highlight html %} <ej-pivotchart [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  values;

constructor()
{
    this.values = [{ axis : ej.olap.AxisName.Row }];
}

}

{% endhighlight %}

{:#members:datasource-values-iscalculatedfield}

Indicates whether the field is a calculated field or not with Relational datasource.

Example:

{% highlight html %} <ej-pivotchart [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  values;

constructor()
{
    this.values = [{ isCalculatedField : true }]; 
}

}

{% endhighlight %}

{:#members:datasource-values-formula}

Allows to set the formula for calculation of values for calculated members in Relational datasource.

Example:

{% highlight html %} <ej-pivotchart [dataSource.values]="values">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  values;

constructor()
{
    this.values = [{ formula : "Quantity*10" }]; 
}

}

{% endhighlight %}

{:#members:datasource-filters}

Lists out the items which supports filtering of values without displaying the members in UI in PivotChart.

Example:

{% highlight html %} <ej-pivotchart [dataSource.filters]="filters">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  filters;

constructor()
{
    this.filters = itemsArray; 
}

}

{% endhighlight %}

{:#members:datasource-filters-fieldname}

Allows the user to bind the item by using its unique name as field name.

Example:

{% highlight html %} <ej-pivotchart [dataSource.filters]="filters">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  filters;

constructor()
{
    this.filters = [{ fieldName : "MyFieldName" }]; 
}

}

{% endhighlight %}

{:#members:datasource-filters-filteritems}

Applies filter to the field members.

Example:

{% highlight html %} <ej-pivotchart [dataSource.filters]="filters">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  filters;

constructor()
{
    this.filters = [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:datasource-filters-filteritems-filtertype}

Sets the type of filter whether to include/exclude the mentioned values.

Note: This is applicable for Relational datasource only.

Example:

{% highlight html %} <ej-pivotchart [dataSource.filters]="filters">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  filters;

constructor()
{
    this.filters = [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Include, values: valueArray } }]; 
}

}

{% endhighlight %}

{:#members:datasource-filters-filteritems-values}

Contains the collection of items to be included/excluded among the field members.

Example:

{% highlight html %} <ej-pivotchart [dataSource.filters]="filters">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  filters;

constructor()
{
    this.filters = [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }]; 
}

}

{% endhighlight %}

{:#members:customobject}

Object utilized to pass additional information between client-end and service-end on operating the control in server mode.

Example:

{% highlight html %} <ej-pivotchart [customObject]="customObject">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  customObject;

    constructor()
    {
      this.customObject = { Language: "en-US" }; 
    }

}

{% endhighlight %}

{:#members:enable3d}

Allows the user to enable 3D view of PivotChart.

Example:

{% highlight html %} <ej-pivotchart [enable3D]="true">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:enablertl}

Allows the user to view PivotChart from right to left.

Example:

{% highlight html %} <ej-pivotchart [enableRTL]="true">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:enablemultilevellabels}

Allows user to render complete PivotChart on drill operation, that is, when expanding and collapsing members which are shown in multi-level labels.

Example:

{% highlight html %} <ej-pivotchart [enableMultiLevelLabels]="true">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:isresponsive}

Allows the user to enable PivotChart’s responsiveness in the browser layout.

Example:

{% highlight html %} <ej-pivotchart [isResponsive]="true">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:legend}

Lets the user to customize the legend items and their labels.

Example:

{% highlight html %} <ej-pivotchart [legend]="legend">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  legend;

    constructor()
    {
      this.legend = { visible: true }; 
    }

}

{% endhighlight %}

{:#members:locale}

Allows the user to set the localized language for the widget.

Example:

{% highlight html %}

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:operationalmode}

Sets the mode for the PivotChart widget for binding data source either in server-side or client-side.

Example:

{% highlight html %} <ej-pivotchart [operationalMode]="operationalMode">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  operationalMode;

    constructor()
    {
      this.operationalMode = ej.Pivot.OperationalMode.ServerMode; 
    }

}

{% endhighlight %}

{:#members:primaryxaxis}

This is a horizontal axis that contains options to configure axis and it is the primary x axis for all the series in series array. To override x axis for particular series, create an axis object by providing unique name by using name property and add it to axes array. Then, assign the name to the series’s xAxisName property to link both axis and series.

Example:

{% highlight html %} <ej-pivotchart [primaryXAxis]="primaryXAxis">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  primaryXAxis;

    constructor()
    {
      this.primaryXAxis = { title: { text: "Fiscal Year" }, labelRotation: 0 }; 
    }

}

{% endhighlight %}

{:#members:primaryyaxis}

This is a vertical axis that contains options to configure axis. This is the primary y axis for all the series in series array. To override y axis for particular series, create an axis object by providing unique name by using name property and add it to axes array. Then, assign the name to the series’s yAxisName property to link both axis and series.

Example:

{% highlight html %} <ej-pivotchart [primaryYAxis]="primaryYAxis">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  primaryYAxis;

    constructor()
    {
      this.primaryYAxis = { title: { text: "Customer Count" }, labelRotation: 0 }; 
    }

}

{% endhighlight %}

{:#members:rotation}

Allows the user to rotate the angle of PivotChart in 3D view.

Example:

{% highlight html %} <ej-pivotchart [rotation]=45>

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:enablecontextmenu}

Allows the user to enable/disable the context menu options in the PivotChart.

Example:

{% highlight html %} <ej-pivotchart [enableContextMenu]="true">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent { //.. }

{% endhighlight %}

{:#members:size}

Options to customize the size of the PivotChart control.

Example:

{% highlight html %} <ej-pivotchart [size]="size">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

public  size;

    constructor()
    {
      this.size = { height: "450px", width: "95%" }; 
    }

}

{% endhighlight %}

{:#methods:exportpivotchart}

Exports the PivotChart to the format specified in the parameter.

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 chartObj.exportPivotChart(ej.PivotChart.ExportOptions.Excel);

} }

{% endhighlight %}

{:#methods:renderchartfromjson}

This function renders the PivotChart control with the JSON formatted datasource.

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 chartObj.renderControlFromJSON(chartObj.getJSONRecords());

} }

{% endhighlight %}

{:#methods:rendercontrolsuccess}

This function receives the update from service-end, which would be utilized for rendering the widget.

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 chartObj.renderControlSuccess({ "OlapReport": chartObj.getOlapReport(), "JsonRecords": chartObj.getJSONRecords() });

} }

{% endhighlight %}

{:#methods:getjsonrecords}

Returns the JSON records formed to render the control.

array

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 var jsonRecords = chartObj.getJSONRecords();

} }

{% endhighlight %}

{:#methods:setjsonrecords}

Sets the JSON records to render the control.

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 chartObj.setJSONRecords(jsonRecords);

} }

{% endhighlight %}

{:#methods:getpivotengine}

Returns the PivotEngine formed to render the control.

array

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 var jsonRecords = chartObj.getPivotEngine();

} }

{% endhighlight %}

{:#methods:setpivotengine}

Sets the PivotEngine required to render the control.

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 chartObj.setPivotEngine(jsonRecords);

} }

{% endhighlight %}

{:#methods:refreshcontrol}

Re-renders the control with the data source at the instant.

Note: This is only applicable on operating in client mode.

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 chartObj.model.dataSource = newDataSource;
 chartObj.refreshControl();

} }

{% endhighlight %}

{:#methods:destroy}

This function Destroy the PivotChart widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 chartObj.destroy();

} }

{% endhighlight %}

{:#methods:generatejson}

Renders the control with the pivot engine obtained from olap cube.

Example:

{% highlight ts %}

export class PivotChartComponent {

ngAfterViewInit(){

 let chartObj = $(".e-pivotchart").data("ejPivotChart");
 chartObj.generateJSON(baseObj, pivotEngineObj);

} }

{% endhighlight %}

{:#events:load}

Triggers when PivotChart starts to render.

Example:

{% highlight html %} <ej-pivotchart (load)="load($event)">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

load(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:beforepivotenginepopulate}

Triggers before Pivot Engine starts to populate.

Example:

{% highlight html %} <ej-pivotchart (beforePivotEnginePopulate)="beforePivotEnginePopulate($event)">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

beforePivotEnginePopulate(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:beforeseriesrender}

Triggers before rendering multiple series with multiple axes.

Example:

{% highlight html %} <ej-pivotchart (beforeSeriesRender)="beforeSeriesRender($event)">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

beforeSeriesRender(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:drillsuccess}

Triggers on performing drill up/down in PivotChart control.

Example:

{% highlight html %} <ej-pivotchart (drillSuccess)="drillSuccess($event)">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

drillSuccess(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:rendercomplete}

Triggers when PivotChart widget completes all operations at client-side after any AJAX request.

Example:

{% highlight html %} <ej-pivotchart (renderComplete)="renderComplete($event)">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

renderComplete(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:renderfailure}

Triggers when any error occurred during AJAX request.

Example:

{% highlight html %} <ej-pivotchart (renderFailure)="renderFailure($event)">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

renderFailure(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:rendersuccess}

Triggers when PivotChart successfully reaches client-side after any AJAX request.

Example:

{% highlight html %} <ej-pivotchart (renderSuccess)="renderSuccess($event)">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

renderSuccess(args){
     //Enter your code here.
}

}

{% endhighlight %}

{:#events:beforeexport}

Triggers before performing exporting in pivot chart.

Example:

{% highlight html %} <ej-pivotchart (beforeExport)="beforeExport($event)">

{% endhighlight %}

{% highlight ts %}

export class PivotChartComponent {

beforeExport(args){
     //Enter your code here.
}

}

{% endhighlight %}