progress indicators, bug fixes, after a while
This commit is contained in:
110
public/assets/vendors/Flot/docs/navigate.md
vendored
Normal file
110
public/assets/vendors/Flot/docs/navigate.md
vendored
Normal file
@@ -0,0 +1,110 @@
|
||||
## jquery.flot.navigate.js
|
||||
|
||||
This flot plugin is used for adding the ability to pan and zoom the plot.
|
||||
A higher level overview is available at [interactions](interactions.md) documentation.
|
||||
|
||||
The default behaviour is scrollwheel up/down to zoom in, drag
|
||||
to pan. The plugin defines plot.zoom({ center }), plot.zoomOut() and
|
||||
plot.pan( offset ) so you easily can add custom controls. It also fires
|
||||
"plotpan" and "plotzoom" events, useful for synchronizing plots.
|
||||
|
||||
The plugin supports these options:
|
||||
```js
|
||||
zoom: {
|
||||
interactive: false,
|
||||
active: false,
|
||||
amount: 1.5, // 2 = 200% (zoom in), 0.5 = 50% (zoom out)
|
||||
enableTouch: false
|
||||
}
|
||||
|
||||
pan: {
|
||||
interactive: false,
|
||||
active: false,
|
||||
cursor: "move", // CSS mouse cursor value used when dragging, e.g. "pointer"
|
||||
frameRate: 60,
|
||||
mode: "smart", // enable smart pan mode
|
||||
enableTouch: false,
|
||||
touchMode: ""
|
||||
}
|
||||
|
||||
recenter: {
|
||||
interactive: true,
|
||||
enableTouch: true
|
||||
}
|
||||
|
||||
propagateSupportedGesture: false,
|
||||
|
||||
xaxis: {
|
||||
axisZoom: true, //zoom axis when mouse over it is allowed
|
||||
plotZoom: true, //zoom axis is allowed for plot zoom
|
||||
axisPan: true, //pan axis when mouse over it is allowed
|
||||
plotPan: true //pan axis is allowed for plot pan
|
||||
}
|
||||
|
||||
yaxis: {
|
||||
axisZoom: true, //zoom axis when mouse over it is allowed
|
||||
plotZoom: true, //zoom axis is allowed for plot zoom
|
||||
axisPan: true, //pan axis when mouse over it is allowed
|
||||
plotPan: true //pan axis is allowed for plot pan
|
||||
}
|
||||
```
|
||||
**interactive** enables the built-in drag/click behaviour. If you enable
|
||||
interactive for pan, then you'll have a basic plot that supports moving
|
||||
around; the same for zoom and recenter.
|
||||
|
||||
**active** is true after a touch tap on plot. This enables plot navigation.
|
||||
Once activated, zoom and pan cannot be deactivated. When the plot becomes active,
|
||||
"plotactivated" event is triggered.
|
||||
|
||||
**amount** specifies the default amount to zoom in (so 1.5 = 150%) relative to
|
||||
the current viewport.
|
||||
|
||||
**cursor** is a standard CSS mouse cursor string used for visual feedback to the
|
||||
user when dragging.
|
||||
|
||||
**frameRate** specifies the maximum number of times per second the plot will
|
||||
update itself while the user is panning around on it (set to null to disable
|
||||
intermediate pans, the plot will then not update until the mouse button is
|
||||
released).
|
||||
|
||||
**mode** a string specifies the pan mode for mouse interaction. Accepted values:
|
||||
'manual': no pan hint or direction snapping;
|
||||
'smart': The graph shows pan hint bar and the pan movement will snap
|
||||
to one direction when the drag direction is close to it;
|
||||
'smartLock'. The graph shows pan hint bar and the pan movement will always
|
||||
snap to a direction that the drag diorection started with.
|
||||
Default: 'smart'.
|
||||
|
||||
**enableTouch** enables the touch support, for pan (to drag), pinch (to zoom and move),
|
||||
or double tap (to recenter).
|
||||
|
||||
**touchMode** a string specifies the pan mode of touch pan.
|
||||
The accepted values is the sams as **mode** option. Default: 'manual'
|
||||
|
||||
**propagateSupportedGesture** set true to allow the propagation of origin touch events
|
||||
(e.g. 'touchstart') that is already handled for pan or pinch. Default: false.
|
||||
|
||||
Example API usage:
|
||||
```js
|
||||
plot = $.plot(...);
|
||||
|
||||
// zoom default amount in on the pixel ( 10, 20 )
|
||||
plot.zoom({ center: { left: 10, top: 20 } });
|
||||
|
||||
// zoom out again
|
||||
plot.zoomOut({ center: { left: 10, top: 20 } });
|
||||
|
||||
// zoom 200% in on the pixel (10, 20)
|
||||
plot.zoom({ amount: 2, center: { left: 10, top: 20 } });
|
||||
|
||||
// pan 100 pixels to the left and 20 down
|
||||
plot.pan({ left: -100, top: 20 })
|
||||
```
|
||||
|
||||
Here, "center" specifies where the center of the zooming should happen. Note
|
||||
that this is defined in pixel space, not the space of the data points (you can
|
||||
use the p2c helpers on the axes in Flot to help you convert between these).
|
||||
|
||||
**amount** is the amount to zoom the viewport relative to the current range, so
|
||||
1 is 100% (i.e. no change), 1.5 is 150% (zoom in), 0.7 is 70% (zoom out). You
|
||||
can set the default in the options.
|
||||
Reference in New Issue
Block a user