how to insert csv file in the dygraph link interaction

问题

i got this example for link interaction in dygraph but i don't know how to link my csv file with this. i tried replacing r with my csv file., pls guide me., i tried like this by declaring r as te1.csv i get blank graph

<!DOCTYPE html>
<html>
  <head>
    <title>noise</title>
     <script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined-dev.js"></script>
  <script type="text/javascript"
  src=" http://dygraphs.com/dygraph-dev.js"></script>

  </head>
  <body>
    <div id="div_g"></div>
    <div id="output"></div>
    <b>Zoom:</b>
      <a href="#" onclick="zoom(3600)">hour</a>
      <a href="#" onclick="zoom(86400)">day</a>
      <a href="#" onclick="zoom(604800)">week</a>
      <a href="#" onclick="zoom(30 * 86400)">month</a>
      <a href="#" onclick="reset()">full</a>
    <b>Pan:</b>
      <a href="#" onclick="pan(-1)">left</a>
      <a href="#" onclick="pan(+1)">right</a>

    <script type="text/javascript">
    var r = ["te1.csv" ];
      var base_time = Date.parse("date");
      var num = 24 * 0.25 * 365;
      for (var i = 0; i < num; i++) {
        r.push([ new Date(base_time + i * 3600 * 1000),
                 
               ]);
      }
      var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
    
     var date = new Date(),
            output = document.getElementById( 'output' ),
            dateString = date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear().toString().substr(2,2);
               
        output.innerHTML = dateString;
        
       
      g2 = new Dygraph(
            document.getElementById("div_g"),
            r, {
              rollPeriod: 7,
              animatedZooms: true,
              // errorBars: true,
              width: 1000,
              height: 500,
             xlabel: 'date',
                                ylabel: 'Pressure',
            }
          );
      var desired_range = null;
      function approach_range() {
        if (!desired_range) return;
        // go halfway there
        var range = g2.xAxisRange();
        if (Math.abs(desired_range[0] - range[0]) < 60 &&
            Math.abs(desired_range[1] - range[1]) < 60) {
          g2.updateOptions({dateWindow: desired_range});
          // (do not set another timeout.)
        } else {
          var new_range;
          new_range = [0.5 * (desired_range[0] + range[0]),
                       0.5 * (desired_range[1] + range[1])];
          g2.updateOptions({dateWindow: new_range});
          animate();
        }
      }
      function animate() {
        setTimeout(approach_range, 50);
      }
      function zoom(res) {
        var w = g2.xAxisRange();
        desired_range = [ w[0], w[0] + res * 1000 ];
        animate();
      }
      function reset() {
        desired_range = orig_range;
        animate();
      }
      function pan(dir) {
        var w = g2.xAxisRange();
        var scale = w[1] - w[0];
        var amount = scale * 0.25 * dir;
        desired_range = [ w[0] + amount, w[1] + amount ];
        animate();
      }
    </script>
  </body>
</html>

in this i completely removed r and declared csv file directly o/p is its reading csv but day,month,year is showing jan 1 2011 data which is not there in csv file

<!DOCTYPE html>
<html>
  <head>
    <title>noise</title>
     <script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined-dev.js"></script>
  <script type="text/javascript"
  src=" http://dygraphs.com/dygraph-dev.js"></script>

  </head>
  <body>
    <div id="div_g"></div>
    <div id="output"></div>
    <b>Zoom:</b>
      <a href="#" onclick="zoom(3600)">hour</a>
      <a href="#" onclick="zoom(86400)">day</a>
      <a href="#" onclick="zoom(604800)">week</a>
      <a href="#" onclick="zoom(30 * 86400)">month</a>
      <a href="#" onclick="reset()">full</a>
    <b>Pan:</b>
      <a href="#" onclick="pan(-1)">left</a>
      <a href="#" onclick="pan(+1)">right</a>

    <script type="text/javascript">


      g2 = new Dygraph(
            document.getElementById("div_g"),
          te1.csv, {
              rollPeriod: 7,
              animatedZooms: true,
              // errorBars: true,
              width: 1000,
              height: 500,
             xlabel: 'date',
                                ylabel: 'Pressure',
            }
          );
      var desired_range = null;
      function approach_range() {
        if (!desired_range) return;
        // go halfway there
        var range = g2.xAxisRange();
        if (Math.abs(desired_range[0] - range[0]) < 60 &&
            Math.abs(desired_range[1] - range[1]) < 60) {
          g2.updateOptions({dateWindow: desired_range});
          // (do not set another timeout.)
        } else {
          var new_range;
          new_range = [0.5 * (desired_range[0] + range[0]),
                       0.5 * (desired_range[1] + range[1])];
          g2.updateOptions({dateWindow: new_range});
          animate();
        }
      }
      function animate() {
        setTimeout(approach_range, 50);
      }
      function zoom(res) {
        var w = g2.xAxisRange();
        desired_range = [ w[0], w[0] + res * 1000 ];
        animate();
      }
      function reset() {
        desired_range = orig_range;
        animate();
      }
      function pan(dir) {
        var w = g2.xAxisRange();
        var scale = w[1] - w[0];
        var amount = scale * 0.25 * dir;
        desired_range = [ w[0] + amount, w[1] + amount ];
        animate();
      }
    </script>
  </body>
</html>

i got the above code from this example

<!DOCTYPE html>
    <html>
      <head>
        <title>graph</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined-dev.js"></script>
   
    <script type="text/javascript" src=" http://dygraphs.com/dygraph-dev.js"></script>

      </head>
      <body>
        <div id="div_g"></div>
        <b>Zoom:</b>
          <a href="#" onclick="zoom(3600)">hour</a>
          <a href="#" onclick="zoom(86400)">day</a>
          <a href="#" onclick="zoom(604800)">week</a>
          <a href="#" onclick="zoom(30 * 86400)">month</a>
          <a href="#" onclick="reset()">full</a>
        <b>Pan:</b>
          <a href="#" onclick="pan(-1)">left</a>
          <a href="#" onclick="pan(+1)">right</a>

        <script type="text/javascript">
// removed from here to
          var r = [ ];
          var base_time = Date.parse("2008/07/01");
          var num = 24 * 0.25 * 365;
          for (var i = 0; i < num; i++) {
            r.push([ new Date(base_time + i * 3600 * 1000),
                     i + 50 * (i % 60),        // line
                     i * (num - i) * 4.0 / num  // parabola
                   ]);
          }
          var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ]; // up to here removed
          g = new Dygraph(
                document.getElementById("div_g"),
                r,// i replaced csv file here 
{
                  rollPeriod: 7,
                  animatedZooms: true,
                  // errorBars: true,
                  width: 600,
                  height: 300,
                  labels: ["Date", "a", "b"]
                }
              );
          var desired_range = null;
          function approach_range() {
            if (!desired_range) return;
            // go halfway there
            var range = g.xAxisRange();
            if (Math.abs(desired_range[0] - range[0]) < 60 &&
                Math.abs(desired_range[1] - range[1]) < 60) {
              g.updateOptions({dateWindow: desired_range});
              // (do not set another timeout.)
            } else {
              var new_range;
              new_range = [0.5 * (desired_range[0] + range[0]),
                           0.5 * (desired_range[1] + range[1])];
              g.updateOptions({dateWindow: new_range});
              animate();
            }
          }
          function animate() {
            setTimeout(approach_range, 50);
          }
          function zoom(res) {
            var w = g.xAxisRange();
            desired_range = [ w[0], w[0] + res * 1000 ];
            animate();
          }
          function reset() {
            desired_range = orig_range;
            animate();
          }
          function pan(dir) {
            var w = g.xAxisRange();
            var scale = w[1] - w[0];
            var amount = scale * 0.25 * dir;
            desired_range = [ w[0] + amount, w[1] + amount ];
            animate();
          }
        </script>
      </body>
    </html>

i replaced r with csv file but the filter of month,hour,day,week is not working

来源：https://stackoverflow.com/questions/31397499/how-to-insert-csv-file-in-the-dygraph-link-interaction

标签

javascript

dygraphs