DYGraphs: Control multiple graphs with one RangeSelector

问题

I have two graphs on one page, which zoom and pan I want to be able to control with the same RangeSelector. In other words when I move the RangeSelector both graphs should react simultaneously.

The values in my first graph are small numbers between 2 and 20, and the numbers in my second graph have big values > 3000. This is the reason I don't want to put both lines in the same graph. Both graphs have the same date-time

g1 = new Dygraph(document.getElementById("graph1"),
             // For possible data formats, see http://dygraphs.com/data.html
             // The x-values could also be dates, e.g. "2012/03/15"
             "X,Y\n" +
             "1,4\n" +
             "2,2\n" +
             "3,4\n" +
             "4,6\n" +
             "5,8\n" +
             "6,3\n" +
             "7,12\n" +
             "8,14\n",
             {
                 showRangeSelector: true
             });
g2 = new Dygraph(document.getElementById("graph2"),
             // For possible data formats, see http://dygraphs.com/data.html
             // The x-values could also be dates, e.g. "2012/03/15"
             "X,Y\n" +
             "1,4356\n" +
             "2,4789\n" +
             "3,4812\n" +
             "4,5012\n" +
             "5,4675\n" +
             "6,4357\n" +
             "7,4467\n" +
             "8,5134\n",
             {
                    // options
             });

This is my jsfiddle

EDIT 1: there is a solution, that synchronizes zooming and panning Multiple graphs in sync example , but I still wonder if this is doable with range selector

回答1:

I have been working with Dygraph for a few months and I had this same question. The answer is that it is possible.

Once you synchronize the zoom of several dygraphs, the range selector is synchronized too. What I wanted to do is to show all the graphs without range selector and to have only one range selector at the bottom to control all the graphs at the same time. My solution was to create an additional empty dygraph also synchronized with the rest of them, and to add the range selector in this graph. My result is shown in the image attached.

来源：https://stackoverflow.com/questions/40914870/dygraphs-control-multiple-graphs-with-one-rangeselector

标签

javascript

dygraphs