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);
Related
Is it possible with AnyChart, to update the line chart depending on the click made on the sunburst chart ?
Here is an example of what I'd would like to achieve with anyChart, but made here with d3.js (sunburst take time to load)
Yes, it's possible. You should create a chart listener on mouse over and inside the event handler update the second chart. In the comment below you can find a sample which describes how to achieve that. Try to hover with a cursor 'HR' and 'Sales' points, you will how the second chart updates its data.
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
as a part of an app that I'm developing, I am looking for an open source pie chart which can be manipulated on mobiles effectively.
I've found great pie charts such as Flot, jqPlot, HighCharts, etc. however, they only show configured values. While I don't need slice animations of click events, I do need a pie chart with the capability of changing its values from the chart itself, in a way similar to this.
The point is that I want to force a user to have his values sum up at 100 by favoring a slice and increasing its size at the price of lowering another slice.
Thanks in advance.
Chart.js is what you're looking for. If you have a look on the bottom right of the home page you'll see interactivity. You can trigger events when an element is clicked that will resize the chart as long as you are willing to do some javascript yourself.
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',...])