I'm creating a graph with react-vis-js. The graph should be moved in unity with a map that is shown behind the graph. Therefore, I created custom Arrow and Zoom keys. They Work fine with the map. Now I am trying to implement the keys for the graph.
I tried to find a way to move the center of the graph but unfortunately there isn't a way of doing this. Furthermore, I tried to find a way to trigger the keypress events of the keyboard in the onclick of the buttons. The only thing I found was jQuery code that looked like this:$('item').keydown();
This didn't seem to work either. I think it's because this is actually meant to be used as listener not as trigger.
Questions:
Is there a way to have custom buttons for visjs to move and zoom the graph?
Is there a way to trigger keyboard button events with javascript UI buttons?
Do you have other ideas of solving this issue?
Related
Is it possible to recall the chart.draw function on drag and drop of elements.
I want to drag charts around the dashboard, but when I have tried to to implement this, it has just copied the chart and all interactivity has been lost.
Yes, you can do that, but your chart objects have to be in scope for your drag-n-drop event handlers.
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);
In a normal map, if you left-click mostly anywhere and drag, the map pans.
My question is: can you swap left and right buttons to pan the map? That is, left-clicking and dragging does nothing, while panning happens with right-clicking and dragging?
Perhaps there's a JavaScript hack unrelated to Google Maps to accomplish this?
Most other sites solve this by using different modes of using the map. For example when you click a "draw" button you enter "drawing mode" which just disables some Google Maps features like dragging and enables the drawing functionality.
That's the only way I can think of this'll work. Using the right mouse button to draw feels wrong and most users will probably agree i'm afraid.
is there any jquery plugin that enables you to programmatically call a tooltip that will show up under the mouse?
Why I am looking for this is because I have a pie graph made with jquery flot. You can have it call a function when hovering a field in the pie, so this essentially has to be called from a function, and NOT tied to an object on the page.
Thanks in advance, I couldn't really find anything on google searching
Have you looked at the cursormessage plugin?
http://plugins.jquery.com/project/CursorMessage
Alternatively you could try combining clueTip's sticky and mouse follow options:
http://plugins.learningjquery.com/cluetip/demo/
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.