Permalink
Browse files

Update Navigation Control's README.

  • Loading branch information...
Jeff Tian Jeff Tian
Jeff Tian authored and Jeff Tian committed Aug 4, 2014
1 parent 77f5604 commit dd8fc28cd1739474df7a6c5684f867d0a3694a92
View
Binary file not shown.
View
@@ -14,20 +14,40 @@ Inside the `<head></head>` area of your html page, add the following line:
Now you are all set, there will be pan and zooming controls appear on your canvas.
##Online examples:##
http://zizhujy.com/FunctionGrapher is using it.
- (http://zizhujy.com/FunctionGrapher "Online Function Grapher") is using it.
- ![Online Function Grapher is using Navigation Control plugin](onlineExample.png "Online Function Grapher is using Navigation Control plugin")
- (http://zizhujy.com/en-US/Plotter "Online plotter") is using it
- (http://zizhujy.com/JsLibs/JsLibs/NavigationControl?example=BasicExample "Basic Example")
- (http://zizhujy.com/JsLibs/JsLibs/NavigationControl?example=MultipleCharts "Work with multiple charts Example")
##Dependencies:##
These navigation controls would only work if you have referenced jquery.flot.navigation.js plugin and enabled it already.
##Customizations:##
options = {
navigationControl: {
homeRange: {xmin:-10,xmax:10,ymin:-10,ymax:10},
panAmount: 100,
zoomAmount: 1.5,
position: {left: "20px", top: "20px"}
}
};
```javascript
options = {
navigationControl: {
homeRange: {xmin:-10,xmax:10,ymin:-10,ymax:10},
panAmount: 100,
zoomAmount: 1.5,
position: {left: "20px", top: "20px"}
}
};
```
To make the control symbols (+, -, ←, ↑, →, ↓, ⌂) more beautiful, you may include your own icon fonts css file, the symbols
have the css class 'icon' for you to hook.
have the css class 'icon' for you to hook.
##Screenshots:##
#Look and feel:#
![Look and feel](lookAndFeel.png "Look and feel")
#Zoom in horizontally:#
![Zoom in horizontally](zoomInHorizontally.png "Zoom in horizontally")
#Zoom out vertically:#
![Zoom out horizontally](zoomOutHorizontally.png "Zoom out horizontally")
#Work with multiple flot charts:#
[Work with multiple flot charts](workWithMultipleCharts.png "Work with multiple flot charts.")
View
Binary file not shown.
@@ -1,7 +1,7 @@
/* Flot plugin that adds some navigation controls on top of the canvas layer to allow users pan or zoom the graph. This is even more helpful
for the touch screen users.
Copyright (c) 2013 http://zizhujy.com.
Copyright (c) 2013 - 2014 http://zizhujy.com.
Licensed under the MIT license.
Usage:
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.
View
Binary file not shown.

0 comments on commit dd8fc28

Please sign in to comment.