Was wondering if there is a way in the dygraphs to enable draggable points in the sense that when a graph has been generated the user can drag (down or up) a specific point in the graph and the graph will adjust accordingly ?
Is there a way to emulate such a behaviour in Dygraphs ? Haven't found any information about that.
This is possible, but there's no out-of-the-box support for it. You'd have to write your own interaction model to catch the initial mousedown event and subsequent mousemove and mouseup events. You'd probably implement this by changing the underlying chart data during the drag.
Note that click+drag already has a meaning in dygraphs: it zooms the chart.
Related
Is it possible to have more than one element with a .call(drag) on it in a force graph?
In my example I have <circle/>s and <rect/>s. The <circle/>s are part of my force simulation and the <rect/>s are not. I would like to be able to drag both of them, using separate drag handlers of course. The <circle/>s are draggable but the <rect/>s are not. According to some examples I've found it seems totally possible to have a drag event that is not part of a force simulation. But I have no evidence of them working in tandem.
Related fiddle:
The circular nodes are draggable but the squares in the top left of the graph are not.
How can I make both of them draggable? I do not want the squares as part of the simulation as I do not want the forces applied to them.
https://jsfiddle.net/jrymer/ftv94rzk/53/
Seems even though the simulation does not use the data, I still need to respect the simulation's internal timer and use it's tick function to reposition as I drag. I have update the original fiddle to reflect this. The rectangles I added do not effect the nodes force wise, but can still be dragged, which was my goal.
I'm using plotly.js to plot real time data. I'm using the extendTraces method to do so. As can be seen, as new data comes in, the number of points on screen increases, and the graph condenses. I'd like to have the graph pan automatically to the right at a certain point (say 20 points). I was looking at the possible events for this in the documentation, it would seem after_plot would be my best bet though I don't know if extendTraces creates an after_plot event. Either way, is there a function to automatically pan the chart? I can't seem to find this information anywhere.
It was not intuitive for me to find this so I can see why you had trouble finding the answer. But it appears that zoom and pan are controlled by the range attribute of one of the axes attributes. If you want to zoom or pan on the x axis, you need to change the range attribute on the xaxis attribute of the layout.
I have a scenario of drag and drop of highcharts series.
Here is a simplified use case example:
http://embed.plnkr.co/jTdVjm/preview
In this use case I have 5 couples of line and scatter series. The scatter series contain only a small subset of the samples in the line series.
Following recommendations such as this, I've disabled animation, shadow, mouse tracking and marker for the line series. The scatter series can be drag and dropped, whereas the corresponding line series follows it.
In ie8 this produces very poor performance. I get reasonable performance only when I restrict to about 100 samples per series.
I also use series.setData when updating the series data, which is supposed to be the fastest way to change series data.
The requirement is for the line series to follow the scatter series while dragging.
Can anyone suggest other optimization before I get my hands really dirty?
I'm planning on using some optimized web-workers mechanism, so whenever I'm dragging the scatter series, only one mouse-move event will be handled at a time. That is - if a mousemove event occurs, than either it will be ignored or it will cause an interrupt of a previous mousemove event, so only a few of the mouse move events will be handled.
Thanks,
Lior
I have 2 basic line graphs on a page that share the same X axis. What I am trying to accomplish is syncing these graphs up so that when hovering over a point on one graph, the same hover event is triggered on the second graph.
So far I have figured out how to listen into the event via:
chart.lines.dispatch.on('elementMouseover.tooltip', function(e) {
// Need to trigger same event on the xAxis of a separate graph
});
digging thru the nvd3 and d3 source code hasn't brought any revelation onto how to accomplish this so far.
Something like this should work I guess.
chart1.lines.dispatch.on('customEvent', chart2.lines.dispatch.customEvent);
I have a line graph in d3, and we need to implement specific zoom levels, similar to Google maps. I want a mouse wheel zoom in action to snap/transition to the next possible inward zoom level, and a mouse wheel zoom out action to snap/transition to the next possible outward zoom level.
My setup for the zoom method is similar to everyone else's:
self.plot.call(d3.behavior.zoom().x(self.x).y(self.y).on("zoom", self.redraw()));
But I don't know enough about d3 (nor do I have tons of time left...) to know how to set this. Any tips/help?
You can change your zoom event listener to interject the event and adjust the scale as you like (e.g. round to the next integer). There's a blog post that explains a bit more here.
This is a bit more work than simply attaching the zoom behaviour to an axis, but d3 doesn't offer anything to restrict the zoom levels out of the box.