Как выделить определенную область по горизонтали в dygraph и как создать динамический график

мне нужно выделить пример значения y от 20 до -10 и от -30 до -45 по оси y. постоянно с некоторым цветом с непрозрачностью 50%, как это сделать., в этом примере, как добавить внешний файл csv в этот следующий код. Пожалуйста, помогите мне

 var orig_range;
window.onload = function(){ var r = [];                          
      var arr = ["7/13/2015 0:15:45",45,"7/13/2015 0:30",5,"7/13/2015 0:45",100,"7/13/2015 1:00",95,"7/13/2015 1:15",88,"7/13/2015 1:30",78];
      for (var i = 0; i < arr.length; i++) {
        r.push([ new Date(arr[i]),arr[i+1]                 
               ]);
          i++;
      }
     orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
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 src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.0/dygraph-combined-dev.js"></script>
   <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>
i'm trying to convert graph to dynamic graph data from csv file

 var data = ["te1.csv"];


  g2 = new Dygraph(document.getElementById("div_g"), data,
                      {
                        drawPoints: true,
                        showRoller: true,
                        labels:['date','depth'],

                      });
  setInterval(function() {

    data.push([data]);
    g2.updateOptions( { 'file': data } );
  }, 1000);

я видел пример, но я не знаю, как связать мой CSV-файл с динамическим dygraph, пожалуйста, помогите мне


javascript dygraphs
person mahesh    schedule 30.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Этот пример делает что-то очень похожее на то, что вы хотите: он выделяет определенный диапазон на x -ось. Чтобы адаптировать его, вы должны сделать что-то вроде этого:

new Dygraph(data, div, {
  underlayCallback: function (canvas, area, g) {
    var bottom = g.toDomYCoord(highlight_start);
    var top = g.toDomYCoord(highlight_end);

    canvas.fillStyle = "rgba(255, 255, 102, 1.0)";
    canvas.fillRect(area.x, top, area.w, bottom - top);
  }
})
person danvk    schedule 30.07.2015
comment
спасибо, чувак, все сработало нормально, в другом примере твоего setInterval(function() {g2.updateOptions({'file': data}); }, 1000); - person mahesh; 31.07.2015
comment
Я видел пример динамического графика, но мне было трудно подключиться к файлу csv. Ошибки, которые я получаю в консоли 1. Несоответствие между количеством меток (дата, глубина) и количеством столбцов в массиве (7) Dygraph.parseArray_ @ dygraph. js:3229 ..,2.Несоответствие между количеством меток (дата,глубина) и количеством столбцов в массиве (7)Dygraph.parseArray_ @ dygraph.js:3229Dygraph.start_ @ dygraph.js:3433Dygraph.updateOptions @ dygraph.js :3535(анонимная функция) @ graph.html:87 - person mahesh; 31.07.2015