How to enable the zooming option in OlapChart (stand-alone widget) and OlapChart inside the OlapClient?

You can enable zooming option in the OlapChart, stand-alone widget, and the OlapChart in the OlapClient by using the zooming property. This property has three child properties, namely,

1. enable as Boolean.
2. type as string.
3. enableMouseWheel as Boolean.

enable: Enables the zooming option when set to true.

type: Enables the zooming option over the desired axis. Possible values are X, Y, and XY.

enableMouseWheel: Scrolls the Chart image by using the mouse wheel in panning state.

Initially, after zooming the Chart image, you can see three icons at the top-right hand side of the Chart. The first icon is selected, by default that shows the Chart zoomed. In the zoomed state, you cannot scroll the Chart. On scrolling with the cursor, the image gets zoomed even bigger. The second icon is the panning state, where you can scroll the Chart. The third icon resets the Chart to the normal state after zooming.

The following code example illustrates how to enable zooming option in the OlapChart’s, stand-alone widget.

JavaScript

$("#OlapChart").ejOlapChart({ url: "../wcf/OlapChartService.svc", zooming: {enable : true, type : 'x,y', enableMouseWheel: true }});

The following code example illustrates how to enable zooming option in the OlapChart in the OlapClient.

JavaScript

$(function () {
$("#OlapClient").ejOlapClient({ url: "../wcf/OlapClientService.svc", title: "OLAP Browser",   chartLoad: "setChartProperties"});
});
function setChartProperties(args) {
   this.model.zooming= {enable : true, type : 'x,y', enableMouseWheel: true } ;
   this.model.load = "loadTheme";
   this.model.legend.rowCount = 2;
   this.model.primaryXAxis = { title: { text: "Fiscal Year" }, labelRotation: 270 };
   this.model.primaryYAxis = { title: { text: "Customer Count" } };}