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
Related
I was trying to draw a polar plot using the Anychart library and I found a strange behavior that I wanted to share. I wanted to draw a polar plot with a number of points that are linked with a line representing different angles. The strange behavior I saw is that sometimes the line belongs to the "shortest path" between points and sometimes belongs to the "longest path", connecting the dots always in a "clockwise" direction.
In my brain, the line should go "clockwise" when increasing the angle (for instance, moving from 45º to 135º) and "counterclockwise" when decreasing the angle (for instance, moving from 135º to 45º).
My question is, is there an option to decide the direction of the line connecting the dots? I have done a test here with the "Anychart" playground option to show this scenario (https://playground.anychart.com/F6srRlRo/12). The "always-clockwise" performance can be seen in the upper left plot, while the desired performance, achieved by dividing the lines into 3 different line series, can be seen in the upper right plot. The problem of the solution I found is that, for longer datasets, depending on the data it might be required to use thousands of different series, which lowers considerably the rendering time of the plot (this can be seen in the lower left and lower right plots, where the left one is faster, but is "always-clockwise" and the right one is slower, but as desired).
any help in how to improve rendering time or plot everything in one simple Line data series?
this example: Synchronisation of multiple charts
use the chartx and charty position of the mouse to detect which data point is hovered. But if u want to sync charts with different sizes... of course it stops working.
the charts are timeseries with the same data length. Is there a way to synchronise relative?
Greetings mok
It's not working as you expecting, because it's not taking current xAxis focused value, but actually the pointer position.
However, I found the example on our Highcharts forum, which shows how to draw the crosshair on all charts, basing on current xAxis position instead of pointer one, so it should help you to solve your problem.
Please refer to this topic: https://forum.highcharts.com/highcharts-usage/synchronize-line-chart-with-xrange-chart-t39781/?hilit=synchronization&sid=72b63bab7545ef4ba2c4a102ef52cfa5
I am looking for a way to retrieve the selected data of a parallel coordinates plot created with Plotly.js every time the selection changes. A minimal JSFiddle example of my problem can be found here:
https://jsfiddle.net/5g9p49jq/
And I am struggling with these lines, as I do not know the correct event for a selection in a parallel coordinates plot (if there is one). The following does not work:
graphDiv.on('plotly_selected', function() {
/*
Event does not get emitted when selecting data on the parallel
coordinates plot
*/
});
I created a parallel coordinates plot with Plotly.js following the official tutorial on their page:
https://plot.ly/javascript/parallel-coordinates-plot/
For retrieving the data I thought of using one of Plotly's events. I thought the Select Event might fit this purpose, but it seems that it is only meant to use for lasso selection (e.g. on scatter plots) not the selection in a parallel coordinates plot.
So my question is:
Is there an event emitted, when making a selection on a parallel coordinates plot or how else would I retrieve the data of my selection after the selection changed?
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.
I'm wondering whether there is some high level way of having more than one brush on a graph. Here's the problem:
I have a stacked bar chart where each bar represents one weekday and different metrics are stacked on top of one another (stacked line charts are not available yet as far as I know). Now I would like to let the user select the days to display (and the selection should propagate into the other graphs). Everything works great with the brush on, but if you want to choose Sunday, which is at the end of the graph, and Monday which is at the beginning, you can't do that using a single brush. Anybody knows of a way to add more brushes?
Alternatively I'm looking for a way to add a click event listener that would "activate" the day you click on in a similar way like a ring chart section would work.
Thanks a lot for your ideas,
Renra
You could try using an ordinal x axis instead of a linear one. The default behavior for ordinal bar charts is to click to select/deselect bars instead of range selection.
That's chart.x(d3.scale.ordinal()).xUnits(dc.units.ordinal). If you are using dc 1.7.1 of earlier, you may have to specify the domain by d3.scale.ordinal().domain([’Monday',...])