First part of the question is: What events trigger tooltips? According to the Vega documentation, tooltips are triggered by "mouse hover" events. Based on my experiments, this includes only mousemove and mouseout events.
Second part: Is it possible to specify an event stream that triggers tooltips? Say, for example I had two panels in a visualization: one, a map of U.S. counties and two, a scatter plot of the same counties. It may be useful to have a tooltip show on the map when hovering over the scatter plot, and vice versa.
Related
Is there a way to attach a click event into the background of a Plotly.js chart?
The idea is to let the user click on the chart in order to select the coordinates of a new element. So, it's not just an standard event on the div wrapper, but a specific event that can track the relative coordinates of the selected location.
The plotly_click event specified in the documentation is only attached to the specific elements (dots, lines, etc) and I couldn't find any way to achieve what I am looking for.
We are migrating from Highcharts, which lets you define a callback for a click event on the chart as well as for a click on the points.
Is there anything like this in Plotly.js or any way to accomplish it?
I am currently specifying my own events handlers for C3.js graphs thanks to the people that answered this post ;) . However my event handlers are interfering with some C3.js event handlers. For example my custom drag&drop zoom interferes with the default behaviour of C3.js, which is translating in a zoomed graph.
Here is the jsFiddle
With such a setup dragging on my graph makes it move horizontally and zoom.
I would like to know if it is possible to remove existing events such as mouse wheel to zoom or drag&drop to move on a zoomed graph? I've already tried to assign null to these events on c3-event-rects layer but it doesn't seem to work.
Thanks a lot :)
You have zooming enabled in your chart options - this will cause the C3 zooming to kick in on mouse scroll. Just change this to false
zoom: {
enabled: false,
...
Since you are using the API to call zoom in your handler (vs. triggering the events), the zoom call in your handlers will still continue to work with this set to false.
I want to access the points of an NVD3 line chart independently, so I may hide/show them selectively, and pass them metadata to display in their tooltips.
I have a chart with an X-axis showing hours, 0-24. I wish to be able to selectively hide/show point markers at only select hours, to indicate some type of event has occurred at that time.
I am looking for a way, preferably, to get all the points as an array, iterate through them, determine if they should be hidden or shown, and manipulate their colour, and metadata for their tooltip.
I don't see any examples of being able to select all the points, but I know there must be a way.
Thanks for your help!
I came across this Jquery based pie chart online. You can download it freely from here: http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/
I am unable to convert the mouse click function of sliding pie pieces to react on mousehover in the same way. There seem to be an issue with the way they react to mouse hover. However, when the same mousehover is applied to the table, there is no problem and the pie chart reacts as expected. Can you please look into the code and tell me what needs to be changed in order to get the pie chart to expand on mouse hover.
Thank you very much.
The reason the hover event doesn't work on the chart, is because the chart is a canvas element. The slices aren't separate elements. So you need to use a mousestop event, that gets called every time the user hover over a slice and holds the mouse still.
The mousestop event doesn't come with Jquery, but Richard Scarrott made a Jquery plugin: http://www.richardscarrott.co.uk/posts/view/jquery-mousestop-event
You can use it on the chart like this:
$('#chart').mousestop(100, handleChartClick);
I am trying to develop a graph visualization webpage using d3, and I
need to provide basic zoom and pan functionality over the graph.
I saw the d3.behaviour.js file to see how the zoom functionality
works. It is fine as far as the default behavior goes. But is there
any way by which the zoom function can be called manually, lets say by
attaching it to zoom it and zoom out buttons.
Zoom behavior in d3 seems very tied to the mouse events.
A workaround you can do is manually firing 'mousewheel' (ie/webkit) and 'DOMMouseScroll' (firefox) events when you click a button.
You can see an example on how to register and dispatch these events here: http://jsfiddle.net/6nnMV/
I think you just need to get the current scale, increase/decrease by one, and then set it back https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-scale.
After that, employ https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-event to update the visualization with the new scale.