Search code examples
javascriptd3.jschartsdygraphs

Linking dygraphs.js to d3 charts

I'm currently working on building a charting web application, and I've chosen dygraphs for my time series data (Two weeks of data at an hourly level, if anyone finds this information relevant). On the same page, I also have a couple of customized d3.js charts that pull metrics from the same database as the trendline.

I want to know if I will be able to link the selection on my dygraph line (Supposing I zoom in on 3 hours worth of data, i.e., 3 rows) - to my d3 charts, so that the data in the d3 charts also get filtered down to the date range chosen by zooming in?

I'm quite the amateur here, and apologize if my question seems vague, but any sense of direction would be helpful. I'm guessing I should be able to do this by modifying some class in the dygraphs source code, or reference the same from my d3 chart.

Thanks.

Solution

  • You shouldn't have any trouble doing this. There's no need to modify the dygraphs source. You can implement handlers on the dygraph object (zoomHandler or drawCallback, most likely) which update the D3 chart.

    See this demo for an example of synchronization between multiple dygraphs.