Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DYGraphs: Control multiple graphs with one RangeSelector

Tags:

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.

Multiple graphs with 1 range selector

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

like image 219
filip_j Avatar asked Dec 01 '16 15:12

filip_j


1 Answers

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.

Once range selector to control all of them

like image 69
Lucidio Vacas Avatar answered Oct 12 '22 13:10

Lucidio Vacas