I would like to know,
how can I move a gridLine up/down dynamically with the mouse in d3.js ?
Thanks a lot :)
The way I have done this in the past is to add an extra horizontal or vertical line to your graph and mark it as hidden.
Then whenever an element is moused-over show the line, whenever the element is moused-out hide the line again. You would need to set the X and Y values of the line such that it matches the location of the element the cursor is hovering over.
This is similar to the way showing/hiding tooltips work: https://gist.github.com/biovisualize/1016860 except you would not use a div (you would use a line) and would not use the location of the mouse pointer (you would use the x and y of the element).
Related
How could I implement such mouseover effect that whenever mouse is over the linechart it shows every lines Y-value in an tooltip on hovered X?
So, in the end by moving mouse over the chart it should always show a tooltip that is updated constantly with Y value based on changed X? Now it shows tooltip only on X-scales steps e.g. 2010,2011,2012,2013,2014...
I don't have time at this very moment to write a complete solution, but I can try to point you in the right direction in terms of the part you will need that is directly related to the Google Charts API.
There Is Not A Simple Solution
First off, I'd like to make it very clear that there is not, to my knowledge, a simply solution built into the Google Charts API for this. Anything you right for this will involve rendering your own tooltip element, positioning it to the mouse location, and filling the tooltip with data yourself.
A JavaScript Framework of your choice will probably help a lot. Most have plugins or modules to handle mouseover and mouse position detection, though I can't recommend any specifically because I haven't tried this.
Chart Layout Interface
What you need to get the data values belonging to the mouse location is the Chart Layout Interface. You can get this as follows:
// create a line chart and set up a variable to store your interface
// on outside the scope of your ready handler, so you can use the
// interface in your mouse event code.
var layoutInterface;
var chart = new google.visualization.LineChart(document.getElementById('container-id'));
// set up a handler for the chart's ready event
// the chart layout interface is not available until the chart has
// been drawn
var readyHandler = function(){
layoutInterface = chart.getChartLayoutInterface();
};
// register the event handler
google.visualization.events.addListener(chart, 'ready', readyHandler);
I learned this from the demo here.
You will be using the getHAxisValue(xCoordinate) and getVAxisValue(yCoordinate) methods on the layout interface to get the data values corresponding to the x and y coordinates of the chart. The coordinates are relative to the chart's container element. See the Line Chart Documentation for information on methods available on the layout interface.
Mouse Event Handling
The mouse handling part of this is beyond the scope of my knowledge, but I do know that it is possible. I think you need to register a mouse enter event handler on your chart's container element, which would then register a mouse move, and mouse exit on the same element. The mouse exit would set display:none on your tooltip element and de-register the mouse move handler. The mouse move handler would set the absolute position of your tooltip element to the mouse location, and set it's content to the values retrieved from the chart layout interface.
Good Luck!
Aim:
I have a website with some content and svg scheme in the middle of it. When one points to the elements of the scheme, tooltips should appear next to the mouse cursor.
Problems: Based on examples like this (which was shown by Julian Berger in How to get the position of SVG element), I made working SVG. Unfortunately it is working only as long as the SVG scheme is not included into the website. Content other then SVG make evt.clientX and Y coordinates system to fail --> the tooltip starts to appear in some distance from the cursor (it seems that the more of other then SVG content I have, the further tooltip is moved away from cursor). The simple example is shown here, simply by adding couple of <br/> before the actual SVG begins.
And my question:
Do you have some ideas how to fix the position of the tooltip, so that it would appear always next to the moving cursor?
All the best,
Wojtek
All you have to do is alter mousemove handler a little. It should position the tooltip relative to the top left of the SVG, rather than the page. You do that by subtracting the position of the SVG, which we get by surrounding the SVG with a <div> element and accessing its offsetLeft and offsetTop properties.
<div id="mysvg">
<svg>...</svg>
</div>
function ShowTooltip(evt, mouseovertext) {
svg = document.getElementById("mysvg");
tooltip.setAttributeNS(null,"x",evt.clientX+11 - svg.offsetLeft);
tooltip.setAttributeNS(null,"y",evt.clientY+27 - svg.offsetTop);
...
}
Full demo here
I'm using Fabric.js and I'm looking to have the canvas.on('object:moving') event fired but not when a mouse drags it. I want to do it if I animate the position moving by itself. I could not achieve this by adding the listener and making object.left -= 2.
I added a jsFiddle for this. At first, you will be able to drag the circle and the line will follow. Then uncomment line 49 and watch the circle move and the line will stay still.
http://jsfiddle.net/P5UJM/
Assuming I have the following:
http://www.highcharts.com/stock/demo/basic-line
Notice that when you hover on the chart, you can see a vertical line through the "column" where your mouse is hovered over.
Is there some function or method I can call so that I can click a button and have the vertical column/selected datapoint be triggered programatically without having to hover the mouse over the graph itself?
how to get dynamically the x & y values of a raphael js element even after a zoom or a left or right move, I want to show a div near to my element, when I show the element.getBBox() values I found that they don't change even if I move the element or I zoom in/out, my code that I use to get x & y values seems like this :
x = (myElement.getBBox().x+myElement.getBBox().x2)/2;
x+=$("#container").offset().left;
y = (myElement.getBBox().y+myElement.getBBox().y2)/2;
y+=$("#container").offset().left;
and the code that moves my div (a tooltip) is :
$("#myTooltip").css({"left":x+"px","top":y+"px"}).show();
Note : it works when I do the same thing with mouse coordinates (using x=e.pageX;y=e.pageY;) but in this case I want to do it when I click on another button in the page
thank's in advance
I am also using Raphael and came across to what I think you need in your project.
In order to understand how x and y can be shown dynamically, look at this DEMO:
While you are dragging objects around, you can see their coordinates change dynamically. Good Luck
The solution is to use myElement.attr('x') and myElement.attr('y') instead of myElement.getBBox().x and myElement.getBBox().y, thank you A.S. Roma, don't forget to say hello to Totti
Edit :
if someone have the same problem, the best solution I found untill now is to use jquery and raphael, explication :
First of all I need in the definition of the element to add an ID like this : myElement.node.id='myUniqueId' and after that you can access to the element using jquery like this x = $("#myUniqueId").offset().left and y = $("#myUniqueId").offset().top