Error bars on single points in dygraphs?

Question

I'm using dygraphs to display data with errors. For theoretical data this is completely fine, since it also makes an "error band" around the line - great. However, experimental data is normally based on discrete measurements, adding this kind of data I would like to be able to display only the measured points with their respective error - not drawing error bands to the nearest available points.

I could add a NaN point on each side of the data points to make the error band invisible, however - as the name suggests - it is actually invisible, so even when hovering over the point I can't see the error.

Is there any way to implement error bars for single data points? Especially when mixed with errorbands enabled series?

Here is a jsFiddle showing the case. Line A should be a normal line with errorband, line B only points with per-point errors.

Thanks a lot!

Answer 1

You can do this using a custom plotter:

function singleErrorPlotter(e) {
  var ctx = e.drawingContext;
  var points = e.points;
  var g = e.dygraph;
  var color = e.color;
  ctx.save();
  ctx.strokeStyle = e.color;

  for (var i = 0; i < points.length; i++) {
    var p = points[i];
    var center_x = p.canvasx;
    if (isNaN(p.y_bottom)) continue;

    var low_y = g.toDomYCoord(p.yval_minus),
        high_y = g.toDomYCoord(p.yval_plus);

    ctx.beginPath();
    ctx.moveTo(center_x, low_y);
    ctx.lineTo(center_x, high_y);
    ctx.stroke();
  }

  ctx.restore();
}

Here's an updated version of your fiddle which uses this.