javascript - Set one showRangeSelector for two DyGraph?

Question

I am using DyGraph from https://smartadmin-ng2.github.io/#/graphs/dygraphs. I want to control two dygraph with one showRangSelector. Right now both dygraph has own rang selector. But I want to control with one rang selector, Because both rang selector has same work. Show I want to show one screen shot for more understanding.

dygraphsNoRollTimestamp.js

angular.module('app.xyz').directive('dygraphsNoRollTimestamp', function (DygraphsDataDemo) {
    return {
        restrict: 'A',
        compile: function () {
            return {
                 post: function (scope, element) {
                    new Dygraph(element[0], DygraphsDataDemo.data_total_volume, {
                        customBars: true,
                        title: '',
                        ylabel: 'Total Volume',
                        legend: 'always',
                        labelsDivStyles: {
                            'textAlign': 'right'
                        },
                        showRangeSelector: true
                    });
                }
            }
        }
    }
});

dygraphsNoRollPeriod.js

'use strict';

angular.module('app.xyz').directive('dygraphsNoRollPeriod', function (DygraphsDataDemo) {
    return {
        restrict: 'A',
        compile: function () {
            return {
                post: function (scope, element) {
                    new Dygraph(element[0], DygraphsDataDemo.data_temp, {
                        customBars: true,
                        title: '',
                        ylabel: 'Total Volume',
                        legend: 'always',

                        showRangeSelector: true
                    });
                }
            }
        }

    }
});

DygraphsDataDemo.js

angular.module('app.air').factory('directory', function(){
      function data_temp() {
        return "Date,NY,SF
20070101,46;51;
20070102,47;60;
;
20070102,90;38;
";
    }
    function data_total_volume() {
        return "Date,NY,SF
20070101,26;91;
20070102,27;30;
;
20070102,20;38;
";
    }    

    return {

        data_temp: data_temp,
        data_total_volume: data_total_volume

    }
})

controller.js

angular.module('app.xyz').controller('dcontroller',function ($scope) {     


});

index.html

 <div jarvis-widget id="dygraphs-chart-1" data-widget-editbutton="false">
       <div>
          <div class="widget-body">
              <div dygraphs-no-roll-period style="width: 100%;height: 300px;"></div>
        </div>
        <div class="widget-body">

                            <!-- this is what the user will see -->
          <div dygraphs-no-roll-timestamp  style="width: 100%;height: 300px;"></div>
       </div>
  </div>

So If You see the screen shot then u can see two dygraph has two timeselector(rang selector). So I want to control both dygraph by one rang selector.

I have seen one link (DYGraphs: Control multiple graphs with one RangeSelector I did not get solution.My question related to http://dygraphs.com/gallery/#g/range-selector. You can click jsfiddle button for code in this link. This question is important for me. Your answer will be very valuable for me.

Answer 1

If you want to control both graphs with the same range selector you have to synchronize the graphs like in this example of dygraphs documentation. When the graphs are synchronized, the range selectors displayed works for all the graphs synchronized, so you can use only one range selector or even both, but they are going to be linked.

To use this functionality you have to use the synchronizer.js. It′s easy to use, you only have to use the code below where gs is an array with the dygraphs you want to synchronize.

var sync = Dygraph.synchronize(gs, {
   zoom: true,
   selection: true,
   range: false
});

I am not familiar with angular but I think it will be also work.

Try this synchronizer.js and tell us about your results. If you don′t get to make it work I will try to help you better when I have more time. Regards