ejPivotChart

2 May 201824 minutes to read

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.

Example

HTML

<ej-pivotchart ></ej-pivotchart>

export class AppComponent {
  //..
 }

Requires

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 `enum`

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

Default Value: ej.Pivot.AnalysisMode.Pivot

Name	Description
Pivot	To bind Relational datasource to PivotChart widget
Olap	To bind OLAP datasource to PivotChart widget

Example:

HTML

<ej-pivotchart [analysisMode]="analysisMode">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  analysisMode;

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

cssClass `string`

Specifies the CSS class to PivotChart to achieve custom theme.

Default Value: “”

Example:

HTML

<ej-pivotchart cssClass="gradient-lime">
    </ej-pivotchart>

export class PivotChartComponent {
    //..
 }

zooming `object`

Options for enabling zooming feature of PivotChart.

Default Value: {}

Example:

HTML

<ej-pivotchart [zooming]="zooming">
    </ej-pivotchart>

export class PivotChartComponent {
   
    public  zooming;

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

zooming.enableScrollbar `boolean`

Enables or disables horizontal scrollbar.

Default Value: false

Example:

HTML

<ej-pivotchart [zooming.enableScrollbar]="true">
    </ej-pivotchart>

export class PivotChartComponent {
   //..
 }

commonSeriesOptions `object`

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

Default Value: {}

Example:

HTML

<ej-pivotchart [commonSeriesOptions]="commonSeriesOptions">
    </ej-pivotchart>

export class PivotChartComponent {
   
    public  commonSeriesOptions;

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

commonSeriesOptions.type `enum`

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

Default Value: ej.PivotChart.ChartTypes.Column

Name	Description
Line	To render a Line type PivotChart.
Spline	To render a Spline type PivotChart.
Column	To render a Column type PivotChart.
Area	To render an Area type PivotChart.
SplineArea	To render a SplineArea type PivotChart.
StepLine	To render a StepLine type PivotChart.
StepArea	To render a StepArea type PivotChart.
Pie	To render a Pie type PivotChart.
Bar	To render a Bar type PivotChart.
StackingArea	To render a StackingArea type PivotChart.
StackingColumn	To render a StackingColumn type PivotChart.
StackingBar	To render a StackingBar type PivotChart.
Pyramid	To render a Pyramid type PivotChart.
Funnel	To render a Funnel type PivotChart.
Doughnut	To render a Doughnut type PivotChart.
Scatter	To render a Scatter type PivotChart.
Bubble	To render a Bubble type PivotChart.

Example:

HTML

<ej-pivotchart [commonSeriesOptions.type]="type">
    </ej-pivotchart>

export class PivotChartComponent {
   
    public  type;

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

dataSource `object`

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

Default Value: {}

Example:

HTML

<ej-pivotchart [dataSource]="dataSource">
    </ej-pivotchart>

export class PivotChartComponent {
   
    public  dataSource;

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

dataSource.cube `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart dataSource.cube="Adventure Works">
    </ej-pivotchart>

export class PivotChartComponent {
   //..
 }

dataSource.sourceInfo `string`

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

Note: This is applicable only for Mondrian connection.

Default Value: “”

Example:

HTML

<ej-pivotchart dataSource.sourceInfo="Provider Mondrian">
    </ej-pivotchart>

export class PivotChartComponent {
   //..
 }

dataSource.providerName `string`

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.

Default Value: “ssas”

Name	Description
ssas	To bind an OLAP data source to PivotChart through SSAS provider.
mondrian	To bind a relational data source to PivotChart through Mondrian provider.

Example:

HTML

<ej-pivotchart dataSource.providerName="mondrian">
    </ej-pivotchart>

export class PivotChartComponent {
   //..
 }

dataSource.data `object`

Provides the raw data source for the PivotChart.

Default Value: null

Example:

HTML

<ej-pivotchart [dataSource.data]="data">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  data;

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

dataSource.catalog `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart dataSource.catalog="Adventure Works DW 2008 SE">
    </ej-pivotchart>

export class PivotChartComponent {
    //..
 }

dataSource.columns `array`

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

Default Value: []

Example:

HTML

<ej-pivotchart [dataSource.columns]="columns">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  columns;

    constructor()
    {
        this.columns = itemsArray; 
    }
 }

dataSource.columns.fieldName `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart [dataSource.columns]="columns">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  columns;

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

dataSource.columns.fieldCaption `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart [dataSource.columns]="columns">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  columns;

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

dataSource.columns.isNamedSets `boolean`

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

Note: This is only applicable for OLAP datasource.

Default Value: false

Example:

HTML

<ej-pivotchart [dataSource.columns]="columns">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  columns;

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

dataSource.columns.sortOrder `enum`

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

Note: This is applicable for Relational datasource only.

Default Value: ej.PivotAnalysis.SortOrder.Ascending

Name	Description
Ascending	Sorts the members of the field in ascending order.
Descending	Sorts the members of the field in descending order.
None	Displays the members without sorting in any order.

Example:

HTML

<ej-pivotchart [dataSource.columns]="columns">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  columns;

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

dataSource.columns.filterItems `object`

Applies filter to the field members.

Default Value: null

Example:

HTML

<ej-pivotchart [dataSource.columns]="columns">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  columns;

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

dataSource.columns.filterItems.filterType `enum`

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

Note: This is applicable for Relational datasource only.

Default Value: ej.PivotAnalysis.FilterType.Exclude

Name	Description
Exclude	Excludes the specified values among the members of the field.
Include	Includes the specified values alone among the members of the field.

Example:

HTML

<ej-pivotchart [dataSource.columns]="columns">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  columns;

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

dataSource.columns.filterItems.values `array`

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

Default Value: []

Example:

HTML

<ej-pivotchart [dataSource.columns]="columns">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  columns;

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

dataSource.rows `array`

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

Default Value: []

Example:

HTML

<ej-pivotchart [dataSource.rows]="rows">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  rows;

    constructor()
    {
        this.rows = itemsArray; 
    }
 }

dataSource.rows.fieldName `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart [dataSource.rows]="rows">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  rows;

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

dataSource.rows.fieldCaption `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart [dataSource.rows]="rows">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  rows;

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

dataSource.rows.isNamedSets `boolean`

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

Note: This is only applicable for OLAP datasource.

Default Value: false

Example:

HTML

<ej-pivotchart [dataSource.rows]="rows">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  rows;

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

dataSource.rows.sortOrder `enum`

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

Note: This is applicable for Relational datasource only.

Default Value: ej.PivotAnalysis.SortOrder.Ascending

Name	Description
Ascending	Sorts the members of the field in ascending order.
Descending	Sorts the members of the field in descending order.
None	Displays the members without sorting in any order.

Example:

HTML

<ej-pivotchart [dataSource.rows]="rows">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  rows;

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

dataSource.rows.filterItems `object`

Applies filter to the field members.

Default Value: null

Example:

HTML

<ej-pivotchart [dataSource.rows]="rows">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  rows;

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

dataSource.rows.filterItems.filterType `enum`

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

Note: This is applicable for Relational datasource only.

Default Value: ej.PivotAnalysis.FilterType.Exclude

Name	Description
Exclude	Excludes the specified values among the members of the field.
Include	Includes the specified values alone among the members of the field.

Example:

HTML

<ej-pivotchart [dataSource.rows]="rows">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  rows;

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

dataSource.rows.filterItems.values `array`

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

Default Value: []

Example:

HTML

<ej-pivotchart [dataSource.rows]="rows">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  rows;

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

dataSource.values `array`

Lists out the items supports calculation in PivotChart.

Default Value: []

Example:

HTML

<ej-pivotchart [dataSource.values]="values">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  values;

    constructor()
    {
        this.values = itemsArray; 
    }
 }

dataSource.values.fieldName `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart [dataSource.values]="values">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  values;

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

dataSource.values.fieldCaption `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart [dataSource.values]="values">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  values;

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

dataSource.values.measures `array`

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

Default Value: []

Example:

HTML

<ej-pivotchart [dataSource.values]="values">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  values;

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

dataSource.values.measures.fieldName `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart [dataSource.values]="values">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  values;

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

dataSource.values.axis `string`

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

Note: This is applicable for OLAP datasource only.

Default Value: “rows”

Example:

HTML

<ej-pivotchart [dataSource.values]="values">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  values;

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

dataSource.values.isCalculatedField `boolean`

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

Default Value: false

Example:

HTML

<ej-pivotchart [dataSource.values]="values">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  values;

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

dataSource.values.formula `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart [dataSource.values]="values">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  values;

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

dataSource.filters `array`

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

Default Value: []

Example:

HTML

<ej-pivotchart [dataSource.filters]="filters">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  filters;

    constructor()
    {
        this.filters = itemsArray; 
    }
 }

dataSource.filters.fieldName `string`

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

Default Value: “”

Example:

HTML

<ej-pivotchart [dataSource.filters]="filters">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  filters;

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

dataSource.filters.filterItems `object`

Applies filter to the field members.

Default Value: null

Example:

HTML

<ej-pivotchart [dataSource.filters]="filters">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  filters;

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

dataSource.filters.filterItems.filterType `enum`

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

Note: This is applicable for Relational datasource only.

Default Value: ej.PivotAnalysis.FilterType.Exclude

Name	Description
Exclude	Excludes the specified values among the members of the field.
Include	Includes the specified values alone among the members of the field.

Example:

HTML

<ej-pivotchart [dataSource.filters]="filters">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  filters;

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

dataSource.filters.filterItems.values `array`

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

Default Value: []

Example:

HTML

<ej-pivotchart [dataSource.filters]="filters">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  filters;

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

customObject `object`

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

Default Value: {}

Example:

HTML

<ej-pivotchart [customObject]="customObject">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  customObject;

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

enable3D `boolean`

Allows the user to enable 3D view of PivotChart.

Default Value: false

Example:

HTML

<ej-pivotchart [enable3D]="true">
    </ej-pivotchart>

export class PivotChartComponent {
    //..
 }

enableRTL `boolean`

Allows the user to view PivotChart from right to left.

Default Value: false

Example:

HTML

<ej-pivotchart [enableRTL]="true">
    </ej-pivotchart>

export class PivotChartComponent {
    //..
 }

enableMultiLevelLabels `boolean`

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

Default Value: false

Example:

HTML

<ej-pivotchart [enableMultiLevelLabels]="true">
    </ej-pivotchart>

export class PivotChartComponent {
    //..
 }

isResponsive `boolean`

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

Default Value: false

Example:

HTML

<ej-pivotchart [isResponsive]="true">
    </ej-pivotchart>

export class PivotChartComponent {
    //..
 }

legend `object`

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

Default Value: {}

Example:

HTML

<ej-pivotchart [legend]="legend">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  legend;

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

locale `string`

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

Default Value: “en-US”

Example:

HTML

<ej-pivotchart locale="en-US">
    </ej-pivotchart>

export class PivotChartComponent {
    //..
 }

operationalMode `enum`

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

Name	Description
ClientMode	To bind data source completely from client-side.
ServerMode	To bind data source completely from server-side.

Default Value: ej.Pivot.OperationalMode.ClientMode

Example:

HTML

<ej-pivotchart [operationalMode]="operationalMode">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  operationalMode;

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

primaryXAxis `object`

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.

Default Value: {}

Example:

HTML

<ej-pivotchart [primaryXAxis]="primaryXAxis">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  primaryXAxis;

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

primaryYAxis `object`

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.

Default Value: {}

Example:

HTML

<ej-pivotchart [primaryYAxis]="primaryYAxis">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  primaryYAxis;

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

rotation `number`

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

Default Value: 0

Example:

HTML

<ej-pivotchart [rotation]=45>
    </ej-pivotchart>

export class PivotChartComponent {
    //..
 }

enableContextMenu `boolean`

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

Default Value: false

Example:

HTML

<ej-pivotchart [enableContextMenu]="true">
    </ej-pivotchart>

export class PivotChartComponent {
    //..
 }

size `object`

Options to customize the size of the PivotChart control.

Default Value: {}

Example:

HTML

<ej-pivotchart [size]="size">
    </ej-pivotchart>

export class PivotChartComponent {
    
    public  size;

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

Methods

exportPivotChart()

Exports the PivotChart to the format specified in the parameter.

Example:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

renderChartFromJSON()

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

Example:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

renderControlSuccess()

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

Example:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

getJSONRecords()

Returns the JSON records formed to render the control.

Returns

array

Example:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

setJSONRecords()

Sets the JSON records to render the control.

Example:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

getPivotEngine()

Returns the PivotEngine formed to render the control.

Returns:

array

Example:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

setPivotEngine()

Sets the PivotEngine required to render the control.

Example:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

refreshControl()

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

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

Example:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

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:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

generateJSON()

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

Example:

export class PivotChartComponent {
    
  ngAfterViewInit(){

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

Events

load

Triggers when PivotChart starts to render.

Event Parameters
Name	Type	Description
action	string	returns the current action of PivotChart control.
customObject	object	returns the custom object bound with PivotChart control.
element	object	returns the HTML element of PivotChart control.

Example:

HTML

<ej-pivotchart (load)="load($event)">
    </ej-pivotchart>

export class PivotChartComponent {

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

beforePivotEnginePopulate

Triggers before Pivot Engine starts to populate.

Event Parameters
Name	Type	Description
chartObj	object	returns the current instance of PivotChart.

Example:

HTML

<ej-pivotchart (beforePivotEnginePopulate)="beforePivotEnginePopulate($event)">
    </ej-pivotchart>

export class PivotChartComponent {

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

beforeSeriesRender

Triggers before rendering multiple series with multiple axes.

Name	Type	Description
JS `data`	Object	series - Instance of the series which is about to get rendered

Example:

HTML

<ej-pivotchart (beforeSeriesRender)="beforeSeriesRender($event)">
    </ej-pivotchart>

export class PivotChartComponent {

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

drillSuccess

Triggers on performing drill up/down in PivotChart control.

Event Parameters
Name	Type	Description
chartObj	object	returns the current instance of PivotChart.
drillAction	string	returns the drill action of PivotChart.
drilledMember	string	contains the name of the member drilled.
event	object	returns the event object.

Example:

HTML

<ej-pivotchart (drillSuccess)="drillSuccess($event)">
    </ej-pivotchart>

export class PivotChartComponent {

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

renderComplete

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

Event Parameters
Name	Type	Description
action	string	returns the current action of PivotChart control.
customObject	object	returns the custom object bound with PivotChart control.
element	object	returns the HTML element of PivotChart control.

Example:

HTML

<ej-pivotchart (renderComplete)="renderComplete($event)">
    </ej-pivotchart>

export class PivotChartComponent {

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

renderFailure

Triggers when any error occurred during AJAX request.

Event Parameters
Name	Type	Description
action	string	returns the current action of PivotChart control.
customObject	object	returns the custom object bound with PivotChart control.
element	object	returns the HTML element of PivotChart control.
message	string	returns the error stack trace of the original exception.

Example:

HTML

<ej-pivotchart (renderFailure)="renderFailure($event)">
    </ej-pivotchart>

export class PivotChartComponent {

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

renderSuccess

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

Event Parameters
Name	Type	Description
args	object	returns the current instance of PivotChart.

Example:

HTML

<ej-pivotchart (renderSuccess)="renderSuccess($event)">
    </ej-pivotchart>

export class PivotChartComponent {

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

beforeExport

Triggers before performing exporting in pivot chart.

Event Parameters
Name	Type	Description
url	string	contains the url of the service responsible for exporting.
fileName	string	contains the name of the exporting file.

Example:

HTML

<ej-pivotchart (beforeExport)="beforeExport($event)">
    </ej-pivotchart>

export class PivotChartComponent {

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

ejPivotChart

Example

Requires

Members

analysisMode enum

Default Value: ej.Pivot.AnalysisMode.Pivot

cssClass string

Default Value: “”

zooming object

Default Value: {}

zooming.enableScrollbar boolean

Default Value: false

commonSeriesOptions object

Default Value: {}

commonSeriesOptions.type enum

Default Value: ej.PivotChart.ChartTypes.Column

dataSource object

Default Value: {}

dataSource.cube string

Default Value: “”

dataSource.sourceInfo string

Default Value: “”

dataSource.providerName string

Default Value: “ssas”

dataSource.data object

Default Value: null

dataSource.catalog string

Default Value: “”

dataSource.columns array

Default Value: []

dataSource.columns.fieldName string

Default Value: “”

dataSource.columns.fieldCaption string

Default Value: “”

dataSource.columns.isNamedSets boolean

Default Value: false

dataSource.columns.sortOrder enum

Default Value: ej.PivotAnalysis.SortOrder.Ascending

dataSource.columns.filterItems object

Default Value: null

dataSource.columns.filterItems.filterType enum

Default Value: ej.PivotAnalysis.FilterType.Exclude

dataSource.columns.filterItems.values array

Default Value: []

dataSource.rows array

Default Value: []

dataSource.rows.fieldName string

Default Value: “”

dataSource.rows.fieldCaption string

Default Value: “”

dataSource.rows.isNamedSets boolean

Default Value: false

dataSource.rows.sortOrder enum

Default Value: ej.PivotAnalysis.SortOrder.Ascending

dataSource.rows.filterItems object

Default Value: null

dataSource.rows.filterItems.filterType enum

Default Value: ej.PivotAnalysis.FilterType.Exclude

dataSource.rows.filterItems.values array

Default Value: []

dataSource.values array

Default Value: []

dataSource.values.fieldName string

Default Value: “”

dataSource.values.fieldCaption string

Default Value: “”

dataSource.values.measures array

Default Value: []

dataSource.values.measures.fieldName string

Default Value: “”

dataSource.values.axis string

Default Value: “rows”

dataSource.values.isCalculatedField boolean

Default Value: false

dataSource.values.formula string

Default Value: “”

dataSource.filters array

Default Value: []

dataSource.filters.fieldName string

Default Value: “”

analysisMode `enum`

cssClass `string`

zooming `object`

zooming.enableScrollbar `boolean`

commonSeriesOptions `object`

commonSeriesOptions.type `enum`

dataSource `object`

dataSource.cube `string`

dataSource.sourceInfo `string`

dataSource.providerName `string`

dataSource.data `object`

dataSource.catalog `string`

dataSource.columns `array`

dataSource.columns.fieldName `string`

dataSource.columns.fieldCaption `string`

dataSource.columns.isNamedSets `boolean`

dataSource.columns.sortOrder `enum`

dataSource.columns.filterItems `object`

dataSource.columns.filterItems.filterType `enum`

dataSource.columns.filterItems.values `array`

dataSource.rows `array`

dataSource.rows.fieldName `string`

dataSource.rows.fieldCaption `string`

dataSource.rows.isNamedSets `boolean`

dataSource.rows.sortOrder `enum`

dataSource.rows.filterItems `object`

dataSource.rows.filterItems.filterType `enum`

dataSource.rows.filterItems.values `array`

dataSource.values `array`

dataSource.values.fieldName `string`

dataSource.values.fieldCaption `string`

dataSource.values.measures `array`

dataSource.values.measures.fieldName `string`

dataSource.values.axis `string`

dataSource.values.isCalculatedField `boolean`

dataSource.values.formula `string`

dataSource.filters `array`

dataSource.filters.fieldName `string`

dataSource.filters.filterItems `object`

dataSource.filters.filterItems.filterType `enum`

dataSource.filters.filterItems.values `array`

customObject `object`

enable3D `boolean`

enableRTL `boolean`

enableMultiLevelLabels `boolean`

isResponsive `boolean`

legend `object`

locale `string`

operationalMode `enum`

primaryXAxis `object`

primaryYAxis `object`

rotation `number`

enableContextMenu `boolean`

size `object`