ejPivotChart

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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • export class PivotChartComponent {
        //..
     }

    zooming object

    Options for enabling zooming feature of PivotChart.

    Default Value: {}

    Example:

  • html
  • <ej-pivotchart [zooming]="zooming">
        </ej-pivotchart>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • export class PivotChartComponent {
        //..
     }

    size object

    Options to customize the size of the PivotChart control.

    Default Value: {}

    Example:

  • html
  • <ej-pivotchart [size]="size">
        </ej-pivotchart>
  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • export class PivotChartComponent {
        
      ngAfterViewInit(){
    
         let chartObj = $(".e-pivotchart").data("ejPivotChart");
         var jsonRecords = chartObj.getJSONRecords();
      }
     }

    setJSONRecords()

    Sets the JSON records to render the control.

    Example:

  • ts
  • 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:

  • ts
  • export class PivotChartComponent {
        
      ngAfterViewInit(){
    
         let chartObj = $(".e-pivotchart").data("ejPivotChart");
         var jsonRecords = chartObj.getPivotEngine();
      }
     }

    setPivotEngine()

    Sets the PivotEngine required to render the control.

    Example:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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:

  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • 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>
  • ts
  • export class PivotChartComponent {
    
        beforeExport(args){
             //Enter your code here.
        }
    }