I am using highcharts to graph multilple series (several lines with multiple points each on one chart). The user selects one or more points on multiple lines. Data about the selected points is shown in a gridview on my asp page. After some server side logic I would like to redraw the page and put an image, marker, flag or some other way of showing the user the redrawn graph with those points "marked".
I have been playing with jquery to add an image (small circle) to the div where the chart is rendered but not having much luck with the X/Y position of the image within the div.
Any advice or examples on how I might do this? Not married to image in DIV other suggestions appreciated.
I figured it out. I made a function that is called when the point is clicked passing the whole point object. An if statement toggles the marker of the ponit and using the acumulate = true it shows all the points on my curve that have been selected. Likewise if it is already selected it toggles the marker off. Much easier than what I was trying.
Here is my function to toggle point and make them all seleted
function ChartClicked(oPointObject) {
if (oPointObject.selected) {
oPointObject.select(false, true);
}
else {
oPointObject.select(true, true);
}
}
Here is a snipet of my graph. It is in the plotOptions I call the click event
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
ChartClicked(this);
}
}
}
}
},
Hope this helps someone else.
Related
I'm using Hammer.js to look for horizontal pan gestures, I've devised a simple function to clicks a button when panned left or right. It works okay, except the vertical scroll doesn't do anything on a touch device, or it's really glitchy and weird.
Here's the function:
var panelSliderPan = function() {
// Pan options
myOptions = {
// possible option
};
var myElement = document.querySelector('.scroll__inner'),
mc = new Hammer.Manager(myElement);
mc.add(new Hammer.Pan(myOptions));
// Pan control
var panIt = function(e) {
// I'm checking the direction here, my common sense says it shouldn't
// affect the vertical gestures, but it blocks them somehow
// 2 means it's left pan
if (e.direction === 2) {
$('.controls__btn--next').click();
// 4 == right
} else if (e.direction === 4) {
$('.controls__btn--prev').click();
}
};
// Call it
mc.on("panstart", function(e) {
panIt(e);
});
};
I've tried to add a horizontal direction to the recognizer but it didn't really help (not sure if I did it even right):
mc = new Hammer.Manager(myElement, {
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
Thanks!
Try setting the touch-action property to auto.
mc = new Hammer.Manager(myElement, {
touchAction: 'auto',
recognizers: [
[Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }],
]
});
From the hammer.js docs:
When you set the touchAction to auto it doesnt prevent any defaults, and Hammer would probably break. You have to call preventDefault manually to fix this. You should only use this if you know what you're doing.
User patforna is correct. You need to adjust the touch-action property. This will fix scrolling not working when you have hammer bound on a big element in mobile.
You create a Hammer instance like so
var h = new Hammer(options.contentEl, {
touchAction : 'auto'
});
I was working on a pull to refresh feature, so I need the pan event.
Add the recognizers.
h.get( 'pan' ).set({
direction : Hammer.DIRECTION_VERTICAL,
});
h.on('panstart pandown panup panend', eventHandler);
Inside the eventhandler, you'd look at the event that was triggered and manually call on event.preventDefault() when you require it. This is applicable for hammer 2.0.6.
For anyone who's looking the pull to refresh code was taken from - https://github.com/apeatling/web-pull-to-refresh
My problem was that vertical scroll was toggling a sidebar that was supposed to show/hide on horizontal pan/swipe. After looking at the event details, I realized that Hammer probably triggers panleft and panright event based on X delta and doesn't consider Y delta, so my quick solution was to check the pan direction in my handler:
this.$data.$hammer.on('panleft', (e) => {
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
return;
}
this.isVisible = true;
});
I was stuck on this for several days. Hope this will fix your problem.
mc = new Hammer(myElement, {
inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
touchAction: 'auto',
});
When the relevant gesture is triggered, we applied a css class to the element, that would set the touch-action to none.
mc.on('panmove panstart', event => {
mc.addClass('is-dragging');
}
);
.is-dragging {
touch-action: none !important;
}
Hammer 2.x does not support vertical swipe/pan. Documentation says:
Notes:
When calling Hammer() to create a simple instance, the pan and swipe recognizers are configured to only detect horizontal gestures
You can however use older 1.1.x version, which supports vertical gestures
——
Clarification: this refers to a ‘simple instance’ which is when you don’t pass in any recognizer configuration as the second parameter. In other words these are the defaults but can (and usually should) be overridden.
is there a way to implement a erase method for raphael objects. in this erase method I want to remove specific parts of a particular raphael object. It means that the erase method should work like a real eraser. In the raphael documentation there is a method call Paper.clear(). But we only can delete entire paper.
Any kind of help is appreciated.
The normal way to be to use the remove() method.
http://raphaeljs.com/reference.html#Element.remove
element.remove();
You could eventually create a function that draws shapes with the same color than your paper background-color, on click. Something like this code (jsfiddle at the end of the post). It would cover your content and not erase it, but it would look like it.
var timeoutId = 0;
var cursorX;
var cursorY;
var mouseStillDown = false;
paper = Raphael("paper1","100%","100%");
paper.rect(10,10,100,100).attr({
fill : "black"
});
$("#paper1").mousemove(function(event){
cursorY=event.pageY;
cursorX=event.pageX;
});
function erase() {
if (!mouseStillDown) { return; }
paper.rect(cursorX-25,cursorY-25,50,50).attr({
fill :"white",
stroke : "white"
});
if (mouseStillDown) { setInterval("erase", 100); }
}
$("#paper1").mousedown(function(event) {
mouseStillDown = true;
erase(event.pageX,event.pageY);
});
$("#paper1").mouseup(function(event) {
mouseStillDown = false;
});
Here, each time you click, it creates a white rectangle at your cursor position.
Here's a fiddle of the code : http://jsfiddle.net/c6Xs6/
With a few modifications you could create a menu allowing the user to choose the size and shape of the form you use to "erase".
Something more or less like this : http://jsfiddle.net/8ABe9/
You could also use a div following your cursor to show exactly where the "eraser" would be drawn.
Hope that helped you :)
My implementation has two lists of elements and you basically connect items from the list on the left to items from the list on the right.
We have set the endpoints to be transparent so on the desktop it looks like you just drag from elements on one side to the other.
It works brilliantly on desktop but on touch devices we need the endpoint to cover exactly the space of the element it is attached to in order for it to work as the user would expect. So in effect the whole element becomes an endpoint.
I can achieve this by making the endpoint a rectangle of the same size and anchoring in the center, but I want to anchor on the right/left. If I anchor in the right/left, then my large endpoint is then half covering the element.
Is there a way of anchoring on the right/left but have the endpoint covering the element entirely? Or offsetting the endpoint somehow so it still covers the element?
Thanks in advance for any help
Btw jsPlumb is awesome
You can do it using a transparent image. I did it that way.
endpoint:[ "Image", { src:"/javascript/project/img/c.png",
cssClass:'node' } ]
If you use jsPlumb.addEndpoint() you can add additional parameters for each endpoint you create.
I got this code from one of the examples:
var exampleGreyEndpointOptions = {
endpoint:"Rectangle",
paintStyle:{ width:25, height:21, fillStyle: color }, // size and color of the endpoint
isSource:true,
connectorStyle : { strokeStyle: color }, // color of the line AND the arrow
isTarget:false,
maxConnections:20,
anchor: "BottomCenter"
};
var endpointOptions = {
isTarget:true,
endpoint:"Dot",
paintStyle:{
fillStyle: color // color of the end point
},
beforeDrop: function(info){
return handleConnectionDrop(info);
},
dropOptions: exampleDropOptions,
maxConnections: 20,
anchor: "TopCenter"
};
function InitContainer(el, data) {
elem = $(el);
jsPlumb.addEndpoint(el, {
uuid: elem.attr("id")+"sr"
}, exampleGreyEndpointOptions);
jsPlumb.addEndpoint(el, {
uuid: elem.attr("id")+"tr",
parameters: data // store data in the drain Endpoint
}, endpointOptions);
....
}
in this function I added two endpoints to one element, each with different attributes.
The actual problem you have is that the surface of the endpoint needs to be offset from it's position so that it is within the element. This is mentioned in the API docs, but I didn't find an example yet:
http://jsplumb.org/apidocs/files/jquery-jsPlumb-1-3-16-all-js.html#Endpoint.paint
You can change the position of a anchor, not only by the documented text (like "TopCenter") But also by a array:
anchor: [0.2, 1,0,1]
Give it a try, You'll be able to position the anchor relative to it's element
I am using the Alloy Diagram Builder to create and display network topology.
I would like to remove default click and drag events attached to each nodes, so viewers would not have the ability "build" diagrams but only view diagrams that I have generated.
http://alloyui.com/examples/diagram-builder/real-world/
I have tried these but it does not work.
// detach click event to all nodes with class aui-diagram-node.
Y.all('.aui-diagram-node').detach("click");
// unbind
$(".aui-diagram-node").each(function(){
$(this).unbind();
});
I believe the event is attached to the container .aui-diagram-builder-drop-container via delegate() and the event would be mousedown.
Merely by accident I found a hack that might work for this. I was adding tooltips to my page on which I had a diagram builder, well apparently the tooltips layer a div over the page and simply set the opacity on it to be clear and the object still resides. After a tooltip had come up i was unable to interact with the piece of the diagram builder the tooltip had popped up over.
So based of this concept, why not try overlaying a div over the entire canvas of the diagram and give it a high z-index so that it sits on top. It should effectively not allow interaction with the canvas.
Yes it's a kludge but it just may work.
To make a DiagramBuilder read-only, you can detach() events from all of its children recursively:
/*
* Readonly the diagram
*/
function ReadonlyDiagram(diagram) {
function detachRecursively(node) {
node.get('children').each(detachRecursively);
// You may also want to set the cursor to the default since it will
// change based on which elements the mouse is over.
// node.setStyle('cursor', 'auto');
// You may want to detach specific events such as 'click' or
// 'mousedown' if you do not want to disable all events.
node.detach();
};
diagram.on('render', function (event) {
detachRecursively(diagram.get('boundingBox'));
});
}
Now, you must be post diagramBuilder object to ReadonlyDiagram function like below codes:
YUI().use('aui-diagram-builder', function (y) {
var diagram = new y.DiagramBuilder(
{
availableFields: data,
boundingBox: '#' + containerId,
fields: nodes,
srcNode: '#' + builderId
}).render();
diagram.connectAll(connections);
if (callBackDiagram !== undefined) callBackDiagram(diagram);
if(isReadonly === true) ReadonlyDiagram(diagram);
});
});
Reference
I am making photo collage application for which I need better object selection method. The current or default selecting technique is little bit confused when there are lot's of objects. User are confused on which object is selected. So I want to highlight over the object before selecting it so that use know prior which object is going to be selected.
I have looked at hovering which is what I want but it is only for shapes and don't work for images. How to apply this to images, text and cliparts.
Here is the code :
canvas.on('object:over', function(e) {
//I want to draw border only (not corner) on mouseover and non-selected object
});
canvas.on('object:out', function(e) {
//I want to remove the border on mouseout on non-selected object
});
The border and corner is only applicable for selected objects but I want to enable border for non-selected object on mouse hovering.
Here is my app : Edit Photos For Free
For now I think the solution for this is -
canvas.on('mouseover', function(e) {
//I want to draw border only (not corner) on mouseover and non-selected object
});
canvas.on('mouseout', function(e) {
//I want to remove the border on mouseout on non-selected object
});