example4.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Example 4</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<style>
  .graph-cont {
    height: 175px;
    width: 100%;
  }

  h4 {
    margin-top: 1em;
  }

  footer {
    margin-bottom: 20px;
  }

  .content img {
    margin: 2em 0;
  }

  .range-btns-cont  {
    display: block;
    float:right;
    visibility: hidden;
    margin: 6px 6px;
  }
</style>
<body>

<a href="https://github.com/kaliatech/dygraphs-dynamiczooming-example"><img
    style="position: absolute; top: 0; right: 0; border: 0;"
    src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>

<div class="container">

  <div class="row">
    <div class="col-md-12">

      <h3>Using Dygraphs to load down-sampled data while zooming
        <small> - Example 4</small>
      </h3>

      <p>Same underlying javascript and setup as <a href="example3.html">example 3</a>, but with multiple graphs on the page.  This is primarily a test
      as there were originally some issues with multiple graphs when panning because the endPan handling is global to
      all DyGraphs instances. See code comments in _setupPanInteractionHandling method. </p>

    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <h3>Graph 1</h3>
      <div id="graph-cont-1" class="graph-cont">
      </div>
      <div>

        <span id="range-btns-cont-1" class="btn-group range-btns-cont">
            <button name="range-btn-5y" class="btn btn-default btn-mini">
              5y
            </button>
            <button name="range-btn-1y" class="btn btn-default btn-mini">
              1y
            </button>
            <button name="range-btn-ytd" class="btn btn-default  btn-mini">
              YTD
            </button>
            <button name="range-btn-6m" class="btn btn-default btn-mini">
              6m
            </button>
            <button name="range-btn-1m" class="btn btn-default  btn-mini">
              1m
            </button>
            <button name="range-btn-1w" class="btn btn-default  btn-mini">
              1w
            </button>
            <button name="range-btn-1d" class="btn btn-default btn-mini">
              1d
            </button>

        </span>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <h3>Graph 2</h3>
      <div id="graph-cont-2" class="graph-cont">
      </div>
      <div>

        <span id="range-btns-cont-2" class="btn-group range-btns-cont">
            <button name="range-btn-5y" class="btn btn-default btn-mini">
              5y
            </button>
            <button name="range-btn-1y" class="btn btn-default btn-mini">
              1y
            </button>
            <button name="range-btn-ytd" class="btn btn-default  btn-mini">
              YTD
            </button>
            <button name="range-btn-6m" class="btn btn-default btn-mini">
              6m
            </button>
            <button name="range-btn-1m" class="btn btn-default  btn-mini">
              1m
            </button>
            <button name="range-btn-1w" class="btn btn-default  btn-mini">
              1w
            </button>
            <button name="range-btn-1d" class="btn btn-default btn-mini">
              1d
            </button>

        </span>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-md-12">
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <h3>Files</small></h3>
      <dl>
        <dt><a href="https://github.com/kaliatech/dygraphs-dynamiczooming-example/blob/master/example4.html">example4.html</a>
        </dt>
        <dd>This page. Contains the graph containers' HTML, range selector buttons, and this documentation. No
          javascript except to init the two graph's object instances.
        </dd>
      </dl>
      <dl>
        <dt><a href="https://github.com/kaliatech/dygraphs-dynamiczooming-example/blob/master/j/JGS.Demo3Page.js">j/JGS.Demo3Page.js</a>
        </dt>
        <dd>This is the most relevant file. Contains all of the Dygraphs specific handling. 95% is the same as example 1 & 2.
        </dd>
      </dl>
      <dl>
        <dt><a
            href="https://github.com/kaliatech/dygraphs-dynamiczooming-example/blob/master/j/JGS.GraphDataProvider.js">j/JGS.GraphDataProvider.js</a>
        </dt>
        <dd>Responsible for getting range and detail data from the server/simulator and then aggregating,splicing, and
          converting it for dygraphs. This file is shared with example 1 & 2.
        </dd>
      </dl>
      <dl>
        <dt><a
            href="https://github.com/kaliatech/dygraphs-dynamiczooming-example/blob/master/j/JGS.ServerDataSimulator.js">j/JGS.ServerDataSimulator.js</a>
        </dt>
        <dd>Simulates a remote time series data service. Includes simulated delays. This file is shared with example
          1 & 2.
        </dd>
      </dl>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <a href="https://kaliatech.github.io/dygraphs-dynamiczooming-example/">
        <span class="glyphicon glyphicon-arrow-left"></span> Back to examples list
      </a>
    </div>
  </div>

  <footer>
    <hr>
    <div class="row">
      <div class="col-md-12">
        &copy; 2013 JGS Technical LLC
      </div>
    </div>
  </footer>

</div>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

<script src="j/JGS.ServerDataSimulator.js"></script>
<script src="j/JGS.GraphDataProvider.js"></script>
<script src="j/JGS.Demo3Page.js"></script>

<script>
  $(document).ready(function () {
    var pageCfg1 = {
      $graphCont: $("#graph-cont-1"),
      $rangeBtnsCont: $("#range-btns-cont-1")
    };
    var demo3Page_graph1 = new JGS.Demo3Page(pageCfg1);
    demo3Page_graph1.init();

    var pageCfg2 = {
      $graphCont: $("#graph-cont-2"),
      $rangeBtnsCont: $("#range-btns-cont-2")
    };
    var demo3Page_graph2 = new JGS.Demo3Page(pageCfg2);
    demo3Page_graph2.init();

  });


</script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-8344371-7', 'auto');
  ga('send', 'pageview');
</script>

</body>
</html>