Chapter 8. Working with Touch Gestures

Gestures are a powerful nonverbal mode of communication where we communicate the meaning or idea using body parts, such as hands and face. In computers, different devices offer different gestures, which are typically a combination of one or more events originating from a DOM element. We have hand gestures such as, pinch, drag, swipe, and so on, available on touch devices. Sencha Charts uses them to offer interactions for their charts and makes visual analysis possible. With the help of interactions, one can mark a specific section of a chart, leave a note, zoom into it, and so on.

In this chapter, we will cover:

• Touch gestures support in Sencha Charts

• Using gestures on existing charts

• Out-of-the-box interactions

• Creating custom interactions using touch gestures

• Applying custom interactions to an existing chart

• Applying custom interactions to custom charts

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

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: {
                ...

Creating custom interactions

In this section, we will create three different interactions:

• Trendline: This allows the user to draw straight lines on a cartesian chart. It is a completely custom-developed interaction class and we will see how it can be used with an existing CandleStick as well as a custom MACD chart that we developed in Chapter 4, Creating a Custom Cartesian Chart.

• Annotation: This allows the user to annotate a chart by adding an annotation image with a text. This will be a custom interaction, which we will use with our custom MarketClock chart that we developed in Chapter 5, Creating a Custom Polar Chart.

• ItemHighlight: This is a custom interaction. It allows the user to show more details about a selected series item. We will leverage the Sencha Charts architecture, modify an existing interaction, and use it on our custom PeriodicTable chart that we developed in Chapter 6, Creating a Custom Spacefilling Chart.

Each of these three interactions will explain unique scenarios...

Summary

In this chapter, 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. We also discussed how gestures are used in interactions and how to use this mechanism to develop custom interactions for cartesian, polar, and spacefilling charts.

This brings us to the end of our discussion on the Sencha Charts package. In the next chapter, we will look into some of the other popular JavaScript charting libraries and see how they fair with Sencha Charts.