Light

jeff-tian / jquery.flot.navigationcontrol Goto Github PK

View Code? Open in Web Editor NEW

6.0 6.0 6.0 879 KB

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.

Home Page: http://zizhujy.com/JsLibs/NavigationControl

License: MIT License

CSS 0.69% JavaScript 99.31%

jquery.flot.navigationcontrol's Introduction

jquery.flot.navigationControl

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. Licensed under the MIT license.

##Usage:## Inside the <head></head> area of your html page, add the following line:

<script type="text/javascript" src="http://zizhujy.com/Scripts/flot/navigationControl/jquery.flot.navigationControl.js"></script>

Now you are all set, there will be pan and zooming controls appear on your canvas.

##Online examples:##

##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"}
	}
};

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.

##Screenshots:## #Look and feel:#

#Zoom in horizontally:#

#Zoom out vertically:#

#Work with multiple flot charts:#

jquery.flot.navigationcontrol's People

Contributors

Stargazers

Watchers

Forkers

vineeth-mohan grav3nimag3 enysoft luisalejandroduarte thinksea927

jquery.flot.navigationcontrol's Issues

Examples don't work

These examples:
http://zizhujy.com/JsLibs/NavigationControl?example=BasicExample
http://zizhujy.com/JsLibs/NavigationControl?example=MultipleCharts

Are giving an error in Chrome:

Uncaught ReferenceError: Big is not defined

Custom triggering zooming in/out

Can you explain how you manage Plotter to zoom in/out using "shift + scrollwheel" ?

Panning causes flot value labels to dissapear

I recently tried adding this to a project to allow panning horizontally only, but I'm having an issue with value labels (via https://github.com/winne27/flot-valuelabels ) disappearing as soon as a graph is panned.

Before:

After

Navigation with two charts

Hi, nice plugin. I have a question and looking for some help. I have two or more flot charts displayed on the same page using different data for each. Is it possible to zoom, drag or apply any action on one graph and have other graphs follow that same navigation action. For example, if I drag first chart to the right, I would like other graphs to move exactly as the one on which action was applied. Thanks

User configured options are ignored

I've been trying this plugin out and it works pretty well except that the homeRange option does not work. It always uses the default homeRange. I believe the issue is that in your zoomHome option you use the options variable you define instead of retrieving the user configured options through plot.getOptions()

I'm not very familiar with Javascript or the inner working of flot chart but by adding the line:
var options = plot.getOptions()
in the zoomHome function I was able to get it working properly.

I believe that the user options are also ignored in the other zoom functions.

EDITED

EDITED

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.