In this article by Ajit Kumar, the author Sencha Charts Essentials, we will cover the following topics:

• Touch gestures support in Sencha Charts
• Using gestures on existing charts
• Out-of-the-box interactions
• Creating custom interactions using touch gestures

(For more resources related to this topic, see here.)

Interacting with interactions

The interactions code is located under the ext/packages/sencha-charts/src/chart/interactions folder. The Ext.chart.interactions.Abstract class is the base class for all the chart interactions.

Interactions must be associated with a chart by configuring interactions on it. Consider the following example:

Ext.create('Ext.chart.PolarChart', {
title: 'Chart',
interactions: ['rotate'],
...

The gestures config is an important config. It is an integral part of an interaction where it tells the framework which touch gestures would be part of an interaction. It’s a map where the event name is the key and the handler method name is its value. Consider the following example:

gestures: {
tap: 'onTapGesture',
doubletap: 'onDoubleTapGesture'
}

Once an interaction has been associated with a chart, the framework registers the events and their handlers, as listed in the gestures config, on the chart as part of the chart initialization, as shown here:

Here is what happens during each stage of the preceding flowchart:

1. The chart’s construction starts when its constructor is called either by a call to Ext.create or xtype usage.
2. The interactions config is applied to the AbstractChart class by the class system, which calls the applyInteractions method.
3. The applyInteractions method sets the chart object on each of the interaction objects. This setter operation will call the updateChart method of the interaction class—Ext.chart.interactions.Abstract.
4. The updateChart calls addChartListener to add the gesture-related events and their handlers.
5. The addChartListener iterates through the gestures object and registers the listed events and their handlers on the chart object.
   

   Interactions work on touch as well as non-touch devices (for example, desktop). On non-touch devices, the gestures are simulated based on their mouse or pointer events. For example, mousedown is treated as a tap event.

Using built-in interactions

Here is a list of the built-in interactions:

• Crosshair: This interaction helps the user to get precise x and y values for a specific point on a chart. Because of this, it is applicable to Cartesian charts only. The x and y values are obtained by single-touch dragging on the chart.

  The interaction also offers additional configs:

  • axes: This can be used to provide label text and label rectangle configs on a per axis basis using left, right, top, and bottom configs or a single config applying to all the axes. If the axes config is not specified, the axis label value is shown as the text and the rectangle will be filled with white color.
  • lines: The interaction draws horizontal and vertical lines through the point on the chart. Line sprite attributes can be passed using horizontal or vertical configs.

  For example, we configure the following crosshair interaction on a CandleStick chart:

  interactions: [{
  type: 'crosshair',
  axes: {
  left: {
  label: { fillStyle: 'white' },
  rect: {
  fillStyle: 'pink',
  radius: 2
  }
  },
  bottom: {
  label: {
  fontSize: '14px',
  fontWeight: 'bold'
  },
  rect: { fillStyle: 'cyan' }
  }
  }
  }]

  The preceding configuration will produce the following output, where the labels and rectangles on the two axes have been styled as per the configuration:

  

• CrossZoom:This interaction allows the user to zoom in on a selected area of a chart using drag events. It is very useful in getting the microscopic view of your macroscopic data view. For example, the chart presents month-wise data for two years; using zoom, you can look at the values for, say, a specific month. The interaction offers an additional config—axes—using which we indicate the axes, which will be zoomed. Consider the following configuration on a CandleStick chart:

  interactions: [{
  type: 'crosszoom',
  axes: ['left', 'bottom']
  }]

  This will produce the following output where a user will be able to zoom in to both the left and bottom axes:

   

  Additionally, we can control the zoom level by passing minZoom and maxZoom, as shown in the following snippet:

  interactions: [{
  type: 'crosszoom',
  axes: {
  left: {
  maxZoom: 8,
  startZoom: 2
  },
  bottom: true
  }
  }]

  The zoom is reset when the user double-clicks on the chart.

• ItemHighlight: This interaction allows the user to highlight series items in the chart. It works in conjunction with highlight config that is configured on a series. The interaction identifies and sets the highlightItem on a chart, on which the highlight and highlightCfg configs are applied.
• PanZoom: This interaction allows the user to navigate the data for one or more chart axes by panning and/or zooming. Navigation can be limited to particular axes.

  Pinch gestures are used for zooming whereas drag gestures are used for panning. For devices which do not support multiple-touch events, zooming cannot be done via pinch gestures; in this case, the interaction will allow the user to perform both zooming and panning using the same single-touch drag gesture.

  By default, zooming is not enabled. We can enable it by setting zoomOnPanGesture:true on the interaction, as shown here:

  interactions: {
  type: 'panzoom',
  zoomOnPanGesture: true
  }

  By default, all the axes are navigable. However, the panning and zooming can be controlled at axis level, as shown here:

  {
  type: 'panzoom',
  axes: {
  left: {
  maxZoom: 5,
  allowPan: false
  },
  bottom: true
  }
  }

• Rotate: This interaction allows the user to rotate a polar chart about its centre. It implements the rotation using the single-touch drag gestures.

  This interaction does not have any additional config.

• RotatePie3D: This is an extension of the Rotate interaction to rotate a Pie3D chart. This does not have any additional config.

Summary

In this article, you learned how Sencha Charts offers interaction classes to build interactivity into the charts. We looked at the out-of-the-box interactions, their specific configurations, and how to use them on different types of charts.

Resources for Article:

Further resources on this subject:

• The Various Components in Sencha Touch [Article]
• Creating a Simple Application in Sencha Touch [Article]
• Sencha Touch: Catering Form Related Needs [Article]