1

This is regarding https://github.com/danvk/dygraphs/blob/master/tests/hairlines.html

I have a question, I want to draw maximum 2 hairlines on graph. How can I restrict user to draw just 2 lines.

Is it supported in the API? Where can I get the details? If not supported then how can I do that? Any idea.

Thanks and regards.

1 Answer 1

1

You could use hairlineCreated event to limit the amount of hairlines. For example, the following snippet removes previously added hairlines, if the total amount of hairlines more than two:

$(hairlines).on({
  'hairlineCreated': function() {
    var maxHairlines = 2;
    var h = hairlines.get();
    if (h.length > maxHairlines) {
      h.splice(0, h.length-maxHairlines);
      hairlines.set(h);
    }
  }
);

Check the following snippet for implementation:

var last_t = 0;
var data = [];
var fn = function(t) {
  return Math.sin(Math.PI / 180 * t * 4);
};
for (; last_t < 200; last_t++) {
  data.push([last_t, fn(last_t)]);
}

hairlines = new Dygraph.Plugins.Hairlines({
  divFiller: function(div, data) {
    // This behavior is identical to what you'd get if you didn't set
    // this option. It illustrates how to write a 'divFiller'.
    var html = Dygraph.Plugins.Legend.generateLegendHTML(
      data.dygraph, data.hairline.xval, data.points, 10);
    $('.hairline-legend', div).html(html);
    $(div).data({
      xval: data.hairline.xval
    }); // see .hover() below.
  }
});
g = new Dygraph(
  document.getElementById("demodiv"),
  data, {
    labelsDiv: document.getElementById('status'),
    labelsSeparateLines: true,
    legend: 'always',
    labels: ['Time', 'Value'],

    axes: {
      x: {
        valueFormatter: function(val) {
          return val.toFixed(2);
        }
      },
      y: {
        pixelsPerLabel: 50
      }
    },

    // Set the plug-ins in the options.
    plugins: [hairlines]
  }
);

var shouldUpdate = true;
var update = function() {
  if (!shouldUpdate) return;
  data.push([last_t, fn(last_t)]);
  last_t++;
  data.splice(0, 1);
  g.updateOptions({
    file: data
  });
};
window.setInterval(update, 1000);

// Select/Deselect hairlines on click.
$(document).on('click', '.hairline-info', function() {
  console.log('click');
  var xval = $(this).data('xval');
  var hs = hairlines.get();
  for (var i = 0; i < hs.length; i++) {
    if (hs[i].xval == xval) {
      hs[i].selected = !hs[i].selected;
    }
  }
  hairlines.set(hs);
});

// Demonstration of how to use various other event listeners


$(hairlines).on({
  'hairlineMoved': function(e, data) {
    // console.log('hairline moved from', data.oldXVal, ' to ', data.newXVal);
  },
  'hairlineCreated': function(e, data) {
    var maxHairlines = 2;
    h = hairlines.get();
    if (h.length > maxHairlines) {
      h.splice(0, h.length - maxHairlines);
      hairlines.set(h);
    }
  },
  'hairlineDeleted': function(e, data) {
    console.log('hairline deleted at ', data.xval);
  }
});
#demodiv {
  position: absolute;
  left: 10px;
  right: 200px;
  height: 400px;
  display: inline-block;
}
#status {
  position: absolute;
  right: 10px;
  width: 180px;
  height: 400px;
  display: inline-block;
}
#controls {
  position: absolute;
  left: 10px;
  margin-top: 420px;
}
/* This style & the next show how you can customize the appearance of the
         hairlines */

.hairline-info {
  border: 1px solid black;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: table;
  /* shrink to fit */
  min-width: 100px;
  z-index: 10;
  /* should appear on top of the chart */
  padding: 3px;
  background: white;
  font-size: 14px;
  cursor: move;
}
.dygraph-hairline {
  /* border-right-style: dotted !important; */
  cursor: move;
}
.dygraph-hairline.selected div {
  left: 2px !important;
  width: 2px !important;
}
.hairline-info.selected {
  border: 2px solid black;
  padding: 2px;
}
.annotation-info {
  background: white;
  border-width: 1px;
  border-style: solid;
  padding: 4px;
  display: table;
  /* shrink to fit */
  box-shadow: 0 0 4px gray;
  cursor: move;
  min-width: 120px;
  /* prevents squishing at the right edge of the chart */
}
.annotation-info.editable {
  min-width: 180px;
  /* prevents squishing at the right edge of the chart */
}
.dygraph-annotation-line {
  box-shadow: 0 0 4px gray;
}
<link href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://dygraphs.com/extras/hairlines.js"></script>

<h2>Hairlines Demo</h2>

<p>Click the chart to add a hairline. Drag the hairline to move it.</p>

<!--
    The "info box" for each hairline is based on this template.
    Customize it as you wish. The .hairline-legend element will be populated
    with data about the current points and the .hairline-kill-button element
    will remove the hairline when clicked. Everything else will be untouched.
    -->
<div id="hairline-template" class="hairline-info" style="display:none">
  <button class='hairline-kill-button'>Kill</button>
  <div class='hairline-legend'></div>
</div>

<div id="demodiv"></div>
<div id="status"></div>
</div>

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.