1 | ## jquery.flot.navigate.js
|
2 |
|
3 | This flot plugin is used for adding the ability to pan and zoom the plot.
|
4 | A higher level overview is available at [interactions](interactions.md) documentation.
|
5 |
|
6 | The default behaviour is scrollwheel up/down to zoom in, drag
|
7 | to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and
|
8 | plot.pan( offset ) so you easily can add custom controls. It also fires
|
9 | "plotpan" and "plotzoom" events, useful for synchronizing plots.
|
10 |
|
11 | The plugin supports these options:
|
12 | ```js
|
13 | zoom: {
|
14 | interactive: false,
|
15 | active: false,
|
16 | amount: 1.5, // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
17 | enableTouch: false
|
18 | }
|
19 |
|
20 | pan: {
|
21 | interactive: false,
|
22 | active: false,
|
23 | cursor: "move", // CSS mouse cursor value used when dragging, e.g. "pointer"
|
24 | frameRate: 60,
|
25 | mode: "smart", // enable smart pan mode
|
26 | enableTouch: false,
|
27 | touchMode: ""
|
28 | }
|
29 |
|
30 | recenter: {
|
31 | interactive: true,
|
32 | enableTouch: true
|
33 | }
|
34 |
|
35 | propagateSupportedGesture: false,
|
36 |
|
37 | xaxis: {
|
38 | axisZoom: true, //zoom axis when mouse over it is allowed
|
39 | plotZoom: true, //zoom axis is allowed for plot zoom
|
40 | axisPan: true, //pan axis when mouse over it is allowed
|
41 | plotPan: true //pan axis is allowed for plot pan
|
42 | }
|
43 |
|
44 | yaxis: {
|
45 | axisZoom: true, //zoom axis when mouse over it is allowed
|
46 | plotZoom: true, //zoom axis is allowed for plot zoom
|
47 | axisPan: true, //pan axis when mouse over it is allowed
|
48 | plotPan: true //pan axis is allowed for plot pan
|
49 | }
|
50 | ```
|
51 | **interactive** enables the built-in drag/click behaviour. If you enable
|
52 | interactive for pan, then you'll have a basic plot that supports moving
|
53 | around; the same for zoom and recenter.
|
54 |
|
55 | **active** is true after a touch tap on plot. This enables plot navigation.
|
56 | Once activated, zoom and pan cannot be deactivated. When the plot becomes active,
|
57 | "plotactivated" event is triggered.
|
58 |
|
59 | **amount** specifies the default amount to zoom in (so 1.5 = 150%) relative to
|
60 | the current viewport.
|
61 |
|
62 | **cursor** is a standard CSS mouse cursor string used for visual feedback to the
|
63 | user when dragging.
|
64 |
|
65 | **frameRate** specifies the maximum number of times per second the plot will
|
66 | update itself while the user is panning around on it (set to null to disable
|
67 | intermediate pans, the plot will then not update until the mouse button is
|
68 | released).
|
69 |
|
70 | **mode** a string specifies the pan mode for mouse interaction. Accepted values:
|
71 | 'manual': no pan hint or direction snapping;
|
72 | 'smart': The graph shows pan hint bar and the pan movement will snap
|
73 | to one direction when the drag direction is close to it;
|
74 | 'smartLock'. The graph shows pan hint bar and the pan movement will always
|
75 | snap to a direction that the drag diorection started with.
|
76 | Default: 'smart'.
|
77 |
|
78 | **enableTouch** enables the touch support, for pan (to drag), pinch (to zoom and move),
|
79 | or double tap (to recenter).
|
80 |
|
81 | **touchMode** a string specifies the pan mode of touch pan.
|
82 | The accepted values is the sams as **mode** option. Default: 'manual'
|
83 |
|
84 | **propagateSupportedGesture** set true to allow the propagation of origin touch events
|
85 | (e.g. 'touchstart') that is already handled for pan or pinch. Default: false.
|
86 |
|
87 | Example API usage:
|
88 | ```js
|
89 | plot = $.plot(...);
|
90 |
|
91 | // zoom default amount in on the pixel ( 10, 20 )
|
92 | plot.zoom({ center: { left: 10, top: 20 } });
|
93 |
|
94 | // zoom out again
|
95 | plot.zoomOut({ center: { left: 10, top: 20 } });
|
96 |
|
97 | // zoom 200% in on the pixel (10, 20)
|
98 | plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
|
99 |
|
100 | // pan 100 pixels to the left and 20 down
|
101 | plot.pan({ left: -100, top: 20 })
|
102 | ```
|
103 |
|
104 | Here, "center" specifies where the center of the zooming should happen. Note
|
105 | that this is defined in pixel space, not the space of the data points (you can
|
106 | use the p2c helpers on the axes in Flot to help you convert between these).
|
107 |
|
108 | **amount** is the amount to zoom the viewport relative to the current range, so
|
109 | 1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You
|
110 | can set the default in the options.
|