highcharts panning - zooming

I'm trying to implement highcharts panning based on this example:
http://jsfiddle.net/HXUmK/5/
But I want to be able to zoom with the left mouse button and pan with the right mouse button. So I modified the code above and managed to make it work a little, but when I pan holding the right mouse button, the charts also zoomes.
Is there a way I can disable right mouse button zooming in highcharts?
Edit: Sorry for not being very clear about it. The code in the jsfiddle is not my code. Forget that code, it's just an example form witch I started. I am trying to modify that code in order to get left button zoom and right button pan. So I disabled the mousewheel zoom and activated the standars highcharts zoom
Edit2: Here is my code: http://jsfiddle.net/TKPQN/

You can try with selection event:
chart: {
...
events:{
selection: function(event) {
if (lastButton == 1)
event.preventDefault();
}
}
}
See http://jsfiddle.net/TKPQN/48/

I've wanted to use the Shift key for zooming, so this is my solution
$('#container').highcharts('StockChart', {
chart: {
//zoomType: 'x', // we declare it without zoom, so the pan is enabled
// ...
}});
var chart = $('#container').highcharts();
chart.pointer.cmd = chart.pointer.onContainerMouseDown;
chart.pointer.onContainerMouseDown = function (a){
//in my case, I need only X zooming, so I enable it if shift is pressed
this.zoomX=this.zoomHor=this.hasZoom=a.shiftKey;
this.cmd(a);
};
seems to work ok, so hope it help you
here is a JSFiddle working example: http://jsfiddle.net/73bc23zq/

Related

Is there a way to modify the coordinates of a mouse click event?

I'm working on a clicking / guessing game in the browser, and tackling an issue where I need to show some small popover, on a different, calculated position of the app page.
I am looking into a way to modify the coordinates of the given 'click' event in the popover function, but don't see to be able to figure it out.
Here's a basic example of the 'popover' function:
private presentPopover(ev: Event, data: any) {
let resultPopover = this.popoverCtrl.create(
ResultPopover,
{data: entry},
{cssClass: 'result-popover'}
);
console.log(ev);
/*
here comes the code to manipulate the event coordinates
*/
// Show the popover on a calculated position, relative to the event
resultPopover.present(
{ev: ev, animation: true}
);
resultPopover.onDidDismiss(() => {
// Do something after the popover is removed.
});
}

Highcharts not zooming series using option Highcharts.Series.prototype.drawPoints = function() { }

I am creating a graph where I want to show the markers of the series only when hovering. I already tried the solution as shown on this question (Highcharts markers on legend and hover ONLY), and it works perfectly to show the markers when I want to.
However, I have another graph in the same html page that needs to show the markers and when I applied the solution presented on that question on the graph that I want (first graph) and I zoom at the other graph (second graph) the series that are represented by dots does not zoom, they keep all the markers on the graph.
The option
Highcharts.Series.prototype.drawPoints = function() { };
is on line 37 of the jsfiddle https://jsfiddle.net/erifel/sx3dcmny/
You should be able to use marker.enabled: false and series.states.hover.lineWidthPlus: 0 for achieving your chart without reseting drawPoints function. This will give you a possibility to redraw your markers when zooming on you chart.
If you want to show hidden markers in your legend, you can wrap renderItem function in your Legend prototype:
H.wrap(H.Legend.prototype,'renderItem',function(proceed,item){
var enabled = item.options.marker.enabled;
item.options.marker.enabled = true;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
item.options.marker.enabled = enabled;
});
Here you can see an example how it can work: https://jsfiddle.net/sx3dcmny/12/

How to trigger custom cursor change on mousedown without mousemove event (jQuery)

Trying to change the cursor
I am trying to make a draggable scrollable image and as such am trying to change the cursor over an image when a variable is set to zoom mode so I can have good usability. What I am finding is that the cursor only changes once I have clicked the ".page" and THEN moved the mouse not just as I click the page as it should. Here is some example code:
$(".page").on("mousedown", function (evt) {
if(model.zoomMode){
$('.page').css('cursor','url("img/hand_closed.gif"),auto');
}
}).on("mouseup", function (evt) {
if(model.zoomMode){
$('.page').css('cursor','url("img/hand_open.gif"),auto');
}
});
Another approach relying more on CSS
This seems to happen when I use classes to achieve the same effect as well. ie. zoom mode adds a class outside of the .page object and then the javascript is:
$(".page").on("mousedown", function (evt) {
$('.page').addClass('mouseDown');
}).on("mouseup", function (evt) {
$('.page').removeClass('mouseDown');
});
Then in the CSS:
.zoom .page:hover{
cursor:url(../img/hand_open.gif),auto;
}
.zoom .page.mouseDown:hover{
cursor:url(../img/hand_closed.gif),auto;
}
I am using chrome 18 to test. Anyone know a way to trigger the CSS cursor being applied without moving the mouse?
Short answer: No.
Long answer: Nope, sorry.
(source)

HTML5 Drag and Drop - Map

I have to make a map of Europe with its countries
and then I need a few pics of products from those countries
After that I have to match the pic with the country with drag and drop
if the product is dropped on the correct country it should send me to another page (with more info about the product)
if it's wrong it should display a message
anyone have an idea? I checked for some basic drag and drop stuff but since I'm new to html5 etc and webdesign in general it's really hard to make this from scratch
thanks!
EDIT: also only use HTML, CSS, JS
This can be achieved with the MapQuest JavaScript API. What I would start with is by adding polygon overlays to the map for each country, the colour can be sett to completely transparent by setting the opacity for the overlay to 0.0. From each overlay add a mouseup event listener to each overlay, this event listener can then be used to determine what it was you were dragging in the first place.
For the drag start functionality you can either do this yourself or you could use something like the jQuery UI draggable support, you could then use the dragstop event from the draggable API in conjunction with mouseup on the overlay to perform your logic.
Check out the basic map to get a map going.
Some code to start with
var countryCode;
// Adds an overlay and wires an event for mouseup.
function addMapOverlay(points, cc) {
var poly = new MQA.PolygonOverlay();
poly.setShapePoints(points);
poly.color = "#ffffff";
poly.colorAlpha=0.0;
poly.fillColor = "#ffffff";
poly.fillColorAlpha=0.0;
poly.addListener(rectangle, 'mouseup', function(evt) {
if (evt.eventName === "mouseup") {
// Here you have the event firing for the mouse-up on the overlay.
countryCode = cc;
}
});
}
For the drag-start.
$("#some-country-item").draggable({
start: function(event, ui) {
countryCode = null;
},
stop: function(event, ui) {
if (countryCode === "what you expected") {
// Released on correct country.
} else {
// Did not release on correct country.
}
}
});
You may need to test the event handling to ensure that the correct events are fired in the right order, or use the mouseover event on the overlay object.
The code samples are theoretical and should help you find the right direction to go.

AS3 - MouseWheelDown listener

Is there any way to detect if the mouse wheel is held down? I need to pan my scene while the middle button or mouse wheel is pushed down (I thought holding the mouse wheel down was the same as middle mouse button, but it aint working).
Thanks!
Though I never used it there's MIDDLE_CLICK event which works only in AIR apps. Does your app run in browser or on desktop?
Also, just my 2 cents, it's so damn inconvenient to use scrollwheel button in an application. Each time I am forced to do that in some 3D modelling tool I want to smash my monitor. I'd use just shift/alt/ctrl + mouse1/mouse2.
How about trying out this:
this.onEnterFrame = function() {
if (ASnative(800, 2)(1)) {
trace ("You have pressed or depressed the left mouse button");
}
}
this detects the left mouse... if you substitute the argument (1) with (2) you get the right mouse button so...
this.onEnterFrame = function() {
if (ASnative(800, 2)(2)) {
trace("You have pressed or depressed the right mouse button");
}
}
and if you put in a (4) you get the middle mouse or often the wheel button...
this.onEnterFrame = function() {
if (ASnative(800, 2)(4)) {
trace("You have pressed or depressed the middle mouse or wheel button");
}
}
Source: http://www.actionscript.org/forums/showthread.php3?t=68209
PS: I would suggest not using the middle mouse or wheel button because not everyone has a middle mouse button. So if you still want the usability of a middle mouse button, please adjust your functions accordingly so a person without a middle mouse button can still pan the canvas.
EDIT:
Ok, I made a booboo! Didn't catch it had to be for AS 3.0.
The support for the middle/right mouse button click is no longer available in AS 3.0.
Atleast not directly.
One way to do it is using JS to detect the mouse button that's being pressed and then giving that variable as a string into Flash.
How to detect a mouse click in JS:
http://www.quirksmode.org/js/events_properties.html
How to put this variable into Flash: (ExternalInterface)
http://learn.adobe.com/wiki/display/Flex/External+Interface
Or you can do it directly through a hack in AS 3.0: (limited browser & OS support)
http://flashpunk.net/forums/index.php?topic=2549.0
DEMO: http://www.shinyhappypixels.com/punk-forums/clicky-hook/
This is possible with as3, came across this so here it is:
import flash.events.MouseEvent;
function handleMouseWheel(event:MouseEvent):void {
if ((event.delta > 0 && box_mc.y < 270) || (event.delta < 0 && box_mc.y > 0)) {
box_mc.y = box_mc.y + (event.delta * 3);
}
}
stage.addEventListener(MouseEvent.MOUSE_WHEEL, handleMouseWheel);