docs/source/Navigation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-chart-Navigation'>/**
  19 </span> * @class Ext.chart.Navigation
  20  *
  21  * Handles panning and zooming capabilities.
  22  *
  23  * Used as mixin by Ext.chart.Chart.
  24  */
  25 Ext.define('Ext.chart.Navigation', {
  26
  27     constructor: function() {
  28         this.originalStore = this.store;
  29     },
  30
  31 <span id='Ext-chart-Navigation-method-setZoom'>    /**
  32 </span>     * Zooms the chart to the specified selection range.
  33      * Can be used with a selection mask. For example:
  34      *
  35      *     items: {
  36      *         xtype: 'chart',
  37      *         animate: true,
  38      *         store: store1,
  39      *         mask: 'horizontal',
  40      *         listeners: {
  41      *             select: {
  42      *                 fn: function(me, selection) {
  43      *                     me.setZoom(selection);
  44      *                     me.mask.hide();
  45      *                 }
  46      *             }
  47      *         }
  48      *     }
  49      */
  50     setZoom: function(zoomConfig) {
  51         var me = this,
  52             axes = me.axes,
  53             bbox = me.chartBBox,
  54             xScale = 1 / bbox.width,
  55             yScale = 1 / bbox.height,
  56             zoomer = {
  57                 x : zoomConfig.x * xScale,
  58                 y : zoomConfig.y * yScale,
  59                 width : zoomConfig.width * xScale,
  60                 height : zoomConfig.height * yScale
  61             };
  62         axes.each(function(axis) {
  63             var ends = axis.calcEnds();
  64             if (axis.position == 'bottom' || axis.position == 'top') {
  65                 var from = (ends.to - ends.from) * zoomer.x + ends.from,
  66                     to = (ends.to - ends.from) * zoomer.width + from;
  67                 axis.minimum = from;
  68                 axis.maximum = to;
  69             } else {
  70                 var to = (ends.to - ends.from) * (1 - zoomer.y) + ends.from,
  71                     from = to - (ends.to - ends.from) * zoomer.height;
  72                 axis.minimum = from;
  73                 axis.maximum = to;
  74             }
  75         });
  76         me.redraw(false);
  77     },
  78
  79 <span id='Ext-chart-Navigation-method-restoreZoom'>    /**
  80 </span>     * Restores the zoom to the original value. This can be used to reset
  81      * the previous zoom state set by `setZoom`. For example:
  82      *
  83      *     myChart.restoreZoom();
  84      */
  85     restoreZoom: function() {
  86         this.store = this.substore = this.originalStore;
  87         this.redraw(true);
  88     }
  89
  90 });
  91 </pre>
  92 </body>
  93 </html>