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!
Related
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 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 want to implement HighChart in Drilldown mode which would transition from Column chart to Pie Chart on Double click of the column (double tap in case of mobile).
I am able to modify the drilldown demo provided by Highchart to display content & transition between Column & Pie charts on Single Click.
The running example can be seen at Demo Link.
I have tried the following two ways to perform chart transition on double click. In plotOptions.series.point.events.click, a double click is identified if the two clicks fall within the gap of 500ms.
1) this.series.data[0].firePointEvent('click');
This click is being triggered for first chart, but Pie Chart is not shown on click.
2)
this.drilldown= {series: drilldownSeries};
$('.highcharts-drilldown').onclick()
or any dom event, with
chart.drilldown: { series: drilldownSeries}
removed
The drilldown element is appended to primary chart on the first click (at runtime). So the event handlers of the drilldown chart are not linked & hence can't be triggered. (Please correct me if I am wrong.) Trial Code
Any help is appreciated.
If the above approach is a dead end, alternatively, I will try async mode of Dynamic Drill Down in Highcharts.
I advice to familiar with the custom events plugin which allows to catch double click on point. Then only what you need is destroy chart and create new one or update series.
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);