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?
Related
I'm trying to handle mouse events separately for data labels and chart slices in a pie chart. How could I distinguish whether the even handler was triggered from a data label or from a chart piece? The standard mouse event object doesn't seem to contain any kind of information that could be used to identify the origin of the event. Thanks!
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 saw this beautiful example of a parallel coordinate graph and implemented it for my own data visualization webservice: http://bl.ocks.org/mbostock/7586334
However, I need to get a list of the selected items and show it to the user. Like in this example if you brush for 4 cylinder cars only, I want to have a list of all car names that are now painted in the foreground.
I thought about a jquery selector on g.foreground path and query for all displayed items.
but then I need to code the information in the element.
Or is there even a d3.js built-in for that kind of functionality?
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'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:
zoomType: 'x',
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)
This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.
This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:
http://api.highcharts.com/highcharts#xAxis.plotBands
xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?
Yes, this can be done with xAxis[i].addPlotBand().