ejPivotChart

29 May 201924 minutes to read

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

Syntax

JAVASCRIPT

$(element).ejPivotChart()

Example

HTML

<div id="PivotChart1"></div>

    <script>
        //Create PivotChart
        $("#PivotChart1").ejPivotChart(...);
    </script>

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 pivot chart widget to bind either the OLAP or relational datasource.

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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ analysisMode: ej.Pivot.AnalysisMode.Olap });

cssClass string

Specifies the CSS class to the pivot chart for achieving the custom theme.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ cssClass : "olive" });

zooming object

Options for enabling the zooming feature of the pivot chart.

Default Value: {}

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ zooming: { enableScrollbar: true } });

zooming.enableScrollbar boolean

Enables or disables the horizontal scrollbar.

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ zooming: { enableScrollbar: false } });

commonSeriesOptions object

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

Default Value: {}

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ commonSeriesOptions: { type: ej.PivotChart.ChartTypes.Line } });

commonSeriesOptions.type enum

Allows you to set the specific chart type for the pivot chart 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ commonSeriesOptions: { type: ej.PivotChart.ChartTypes.Spline } });

dataSource object

Initializes the datasource for the pivot chart widget, when it functions completely on the client-side.

Default Value: {}

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart( { dataSource: { data: value } });

dataSource.cube string

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { cube: "Adventure Works" } });

dataSource.sourceInfo string

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

Note: This is applicable only for the Mondrian connection.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { sourceInfo: "Provider Mondrian" } });

dataSource.providerName string

Sets the provider name for the pivot chart to identify whether the provider is SSAS or Mondrian.

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

Default Value: “ssas”

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

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { providerName: "mondrian" } });

dataSource.data object

Provides the raw datasource for the pivot chart.

Default Value: null

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { data: value } });

dataSource.catalog string

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart( { dataSource: { catalog: "databaseName" } } );

dataSource.columns array

Lists out the items to be displayed as series of the pivot chart.

Default Value: []

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { columns: itemsArray } });

dataSource.columns.fieldName string

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { columns: [{ fieldName : "MyFieldName" }] } });

dataSource.columns.fieldCaption string

Allows you to set the display caption for the item.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { columns: [{ fieldCaption : "MyFieldCaption" }] } });

dataSource.columns.isNamedSets boolean

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

Note: This is applicable only for the OLAP datasource.

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { columns: [{ fieldName: "[Core Product Group]", isNamedSets : true }] } });

dataSource.columns.sortOrder enum

Allows you to set the sorting order of field members.

Note: This is applicable only for the relational datasource.

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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { columns: [{ fieldName: "Country", sortOrder : ej.PivotAnalysis.SortOrder.Descending }] } });

dataSource.columns.filterItems object

Applies filter to field members.

Default Value: null

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { 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 only for the relational datasource.

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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { 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 the pivot chart.

Default Value: []

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { rows: itemsArray } });

dataSource.rows.fieldName string

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { rows: [{ fieldName : "MyFieldName" }] } });

dataSource.rows.fieldCaption string

Allows you to set the display caption for the item.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { rows: [{ fieldCaption : "MyFieldCaption" }] } });

dataSource.rows.isNamedSets boolean

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

Note: This is applicable only for the OLAP datasource.

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { rows: [{ fieldName: "[Core Product Group]", isNamedSets : true }] } });

dataSource.rows.sortOrder enum

Allows you to set the sorting order of field members.

Note: This is applicable only for the relational datasource.

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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { rows: [{ fieldName: "Country", sortOrder : ej.PivotAnalysis.SortOrder.Descending }] } });

dataSource.rows.filterItems object

Applies filter to field members.

Default Value: null

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { 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 only for the relational datasource.

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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { rows: [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }] } });

dataSource.values array

Lists out the items support calculation in the pivot chart.

Default Value: []

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { values: itemsArray } });

dataSource.values.fieldName string

Allows you to bind the item by using its unique name as field name for the relational datasource.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { values: [{ fieldName : "MyFieldName" }] } });

dataSource.values.fieldCaption string

Allows you to set the display caption for the item of the relational datasource.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { values: [{ fieldCaption : "MyFieldCaption" }] } });

dataSource.values.measures array

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

Default Value: []

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { values: [{ measures : itemsArray }] } });

dataSource.values.measures.fieldName string

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { values: [{ measures : [{ fieldName: "MeasureUniqueName" }] }] } });

dataSource.values.axis string

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

Note: This is applicable only for the OLAP datasource.

Default Value: “rows”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { values: [{ axis : ej.olap.AxisName.Row }] } });

dataSource.values.isCalculatedField boolean

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

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { values: [{ isCalculatedField : true }] } });

dataSource.values.formula string

Allows you to set the formula to calculate the values for calculated members in the relational datasource.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { values: [{ formula : "Quantity*10" }] } });

dataSource.filters array

Lists out the items that supports filtering of values without displaying the members in UI of the pivot chart.

Default Value: []

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { filters: itemsArray } });

dataSource.filters.fieldName string

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

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { filters: [{ fieldName : "MyFieldName" }] } });

dataSource.filters.filterItems object

Applies filter to field members.

Default Value: null

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { 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 only for the relational datasource.

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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ dataSource: { filters: [{ fieldName: "Country", filterItems : { filterType: ej.PivotAnalysis.FilterType.Exclude, values: ["Canada", "France"] } }] } });

customObject object

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

Default Value: {}

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ customObject: { "key": "Hello World" } });

enable3D boolean

Allows you to enable the 3D view of the pivot chart.

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ enable3D: true });

enableRTL boolean

Allows you to view the pivot chart from right to left.

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ enableRTL: true });

enableMultiLevelLabels boolean

Allows you to render the complete pivot chart on drill operation, when expanding and collapsing members are shown in multi-level labels.

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ enableMultiLevelLabels: true });

isResponsive boolean

Allows you to enable the responsiveness of pivot chart in the browser layout.

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ isResponsive: true });

legend object

You can customize the legend items and their labels.

Default Value: {}

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ legend: { visible: true } });

locale string

Allows you to set the localized language for the widget.

Default Value: “en-US”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ locale: "fr-FR" });

operationalMode enum

Sets the mode for the pivot chart widget to bind the data source either in the server-side or client-side.

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

Default Value: ej.Pivot.OperationalMode.ClientMode

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ operationalMode: ej.Pivot.OperationalMode.ServerMode });

axes 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.

Default Value: []

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ axes: [{ alternateGridBand: { even :{ fill : "green" } } }] });

primaryXAxis object

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

Default Value: {}

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ primaryXAxis: { title: { text: "Fiscal Year" }, labelRotation: 0 });

primaryYAxis object

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

Default Value: {}

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ title: { text: "Customer Count"} });

rotation number

Allows you to rotate the angle of pivot chart in 3D view.

Default Value: 0

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ rotation: 45 });

enableContextMenu boolean

Allows you to enable/disable context menu options in the pivot chart.

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ enableContextMenu: true });

serviceMethodSettings object

Allows you to set the custom name for methods at service-end, when you are communicating on AJAX post.

Note: This is applicable only when operating the control in the server mode.

Default Value: {}

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ serviceMethodSettings: { initialize: "MyMethod1", drillDown: "MyMethod2" } });

serviceMethodSettings.drillDown string

Allows you to set the custom name for the service method that is responsible for drilling up/down in the pivot chart.

Default Value: “DrillChart”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ serviceMethodSettings: { drillDown: "DrillChartMyMethod" } });

serviceMethodSettings.exportPivotChart string

Allows you to set the custom name for the service method which is responsible for exporting the pivot chart.

Default Value: “Export”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ serviceMethodSettings: { exportPivotChart: "ExportMyMethod" } })

serviceMethodSettings.initialize string

Allows you to set the custom name for the service method which is responsible for initializing the pivot chart.

Default Value: “InitializeChart”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ serviceMethodSettings: { initialize: "InitializeChartMyMethod" } });

serviceMethodSettings.paging string

Allows you to set the custom name for the service method which is responsible for navigating between pages in the paged pivot chart.

Default Value: “Paging”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ serviceMethodSettings: { paging: "PagingMyMethod" } });

size object

Options to customize the size of the pivot chart control.

Default Value: {}

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ size: { height: "450px", width: "95%" } });

title object

Options for customizing the title of PivotChart.

title.text string

Text to be displayed in PivotChart title.

Default Value

• ””

Example

JAVASCRIPT

$("#PivotChart1").ejPivotChart({

   title : { text : "PivotChart"}                     

});

url string

Connects the service by using the specified URL for any server updates while operating the control in the server mode.

Default Value: “”

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({ url: "/PivotService" });

enableXHRCredentials boolean

Allows you to enable “withCredentials” property inside XMLHttpRequest object for CORS(Cross-Origin Resource Sharing) request.

Default Value: false

Example:

JAVASCRIPT

$("#PivotChart").ejPivotChart({ enableXHRCredentials: true });

Methods

doAjaxPost()

Posts an asynchronous HTTP (AJAX) request.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.doAjaxPost("POST", "/PivotService/Initialize", { "key", "Hello World" }, successEvent, null);

doPostBack()

Performs an asynchronous HTTP (FullPost) submit.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.doPostBack("/PivotService/Initialize", { "key", "Hello World" });

exportPivotChart()

Exports the pivot chart to the format that is specified in the parameter.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.exportPivotChart(ej.PivotChart.ExportOptions.Excel);

renderChartFromJSON()

This function renders the pivot chart control with the JSON formatted data source.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.renderControlFromJSON(chartObj.getJSONRecords());

renderControlSuccess()

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

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.renderControlSuccess({ "OlapReport": chartObj.getOlapReport(), "JsonRecords": chartObj.getJSONRecords() });

getOlapReport()

Returns the OlapReport string that is maintained along with the axis elements information.

Returns:

string

Note: This method is applicable only when operating the control in the server mode.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    var report = chartObj.getOlapReport();

setOlapReport()

Sets the OlapReport string along with the axis information and maintains it in a property.

Note: This method is applicable only when operating the control in the server mode.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.setOlapReport(olapReportObj);

getJSONRecords()

Returns the JSON records that are formed to render the control.

Returns

array

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    var jsonRecords = chartObj.getJSONRecords();

setJSONRecords()

Sets the JSON records to render the control.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.setJSONRecords(jsonRecords);

getPivotEngine()

Returns the PivotEngine that is formed to render the control.

Returns:

array

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    var jsonRecords = chartObj.getPivotEngine();

setPivotEngine()

Sets the PivotEngine that is required to render the control.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.setPivotEngine(jsonRecords);

refreshControl()

Re-renders the control with the datasource at instant.

Note: This is applicable only when operating in the client mode.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.model.dataSource = newDataSource;
    chartObj.refreshControl();

destroy()

This function destroys the pivot chart widget associated events that are bound using “this._on” and brings the control to pre-init state.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.destroy();

generateJSON()

Renders the control with the pivot engine that is obtained from the OLAP cube.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.generateJSON(baseObj, pivotEngineObj);

refreshPagedPivotChart()

Navigates to the specified page number in the specified axis.

Example:

JAVASCRIPT

var chartObj = $("#PivotChart1").data("ejPivotChart");
    chartObj.refreshPagedPivotChart("series", 4);

Events

load

Triggers when the pivot chart 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({
        load: function (args) {}
    });

afterServiceInvoke

Triggers when it reaches the 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({
        afterServiceInvoke: function (args) {}
    });

beforeServiceInvoke

Triggers before any AJAX request is passed from the pivot chart to service methods.

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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({
        beforeServiceInvoke: function (args) {}
    });

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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({
        beforeSeriesRender: function (args) {}
    });

drillSuccess

Triggers when performing drill up/down operation in the pivot chart 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({
        drillSuccess: function (args) {}
    });

renderComplete

Triggers when the pivot chart widget completes all operations at client-side after the 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({
        renderComplete: function (args) {}
    });

renderFailure

Triggers when the error occurs on the 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({
        renderFailure: function (args) {}
    });

renderSuccess

Triggers when the pivot chart successfully reaches the client-side after the AJAX request.

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

Example:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({
        renderSuccess: function (args) {}
    });

beforeExport

Triggers before performing export operation in the 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:

JAVASCRIPT

$("#PivotChart1").ejPivotChart({
        beforeExport: function (args) {}
    });