So far, we have only explored actions involving a single touch point. Our next goal is to learn how to apply more advanced action events with multi-touch. One of the most common actions is the pinch-in/out for zooming out/in respectively. The Safari browser for iOS supports this motion with the gesturestart, gesturechange, and gestureend events. Whenever there are two or more fingers touching the screen, the gesturestart event is fired. Then, the gesturechange event is triggered when the fingers are moved on the screen. When the fingers leave the screen, the gestureend event is generated. In returning control to the event handler, if the action is recognized, a certain property in the event object is updated. For instance, the scale property in the event object is set to larger than 1.0 for pinch-out and less than 1.0 for pinch-in. For the GestureEvent class reference, please see https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html.

In this section, we will apply the pinch motions to a pie chart. For the pinch-out action, we turn the pie chart into a doughnut chart with extra information on the outer ring—and vice versa for pinch-in, turning the doughnut chart back to a pie chart. First of all, let's launch a new chart, Top 10 countries by medals, the second item from the front menu. The following screenshot is the output of the chart:

When we perform a pinch-out action, the chart is redrawn as shown in the following screenshot:

The outer ring shows the ratio of each color medal for each country. Moreover, the original pie chart data labels move inwards to make space for the outer ring. Let's see how the gesturechange event is implemented. The following is the code inside the pageinit handler:

      $('#chart_container').on('gesturechange', 
          function(evt) {
              evt = evt.originalEvent || evt;
              var myApp = $.olympicApp;

              if (evt.scale > 1) {
                  // Pinch open - from pie chart to 
                  // donut chart
                  if (!myApp.medalChart.series[1].visible) {
                      myApp.medalChart.destroy();
                      myApp.medalChart = createChart({
                          orientation: getOrientation(),
                          device: device,
                          outerRing: true,
                          load: myApp.plotMedalChart
                      });
                  }
              } else if (myApp.medalChart.series[1].visible) {
                  // Pinch close
                  myApp.medalChart.destroy();
                  myApp.medalChart = createChart({
                      orientation: getOrientation(),
                      device: device,
                      load: myApp.plotMedalChart
                  });
              } 
      });

We bind the gesture event to the chart container. This event handler is called whenever there is a multi-touch gesture made on the screen, such as a pinch or rotate motion. In order to make sure this is a pinch action, we need to look into the original event generated by the browser that is wrapped by the jQuery layer. We will examine whether the scale property has been set and decide whether it is pinch-in or pinch-out, then we will recreate the pie or doughnut chart if necessary.