// Calculate the min/max y value in the Dygraph's data set.

function calcMinMax(g) {

  var ymin = g.getValue(0, 1), ymax = g.getValue(0, 1), v;

  for (var i = 0; i < g.numRows(); i++) {

    for (var j = 1; j < g.numColumns(); j++) {

      y = g.getValue(i, j);

      if (y < ymin) {

        ymin = y;

      } else if (y > ymax) {

        ymax = y;

      }

    }

  }

  return [ymin, ymax];

}

​

g = new Dygraph(document.getElementById("graph"),

                 // For possible data formats, see http://dygraphs.com/data.html

                 // The x-values could also be dates, e.g. "2012/03/15"

                 "X,Y,Z\n" +

                 "1,1,3\n" +

                 "2,2,6\n" +

                 "3,4,8\n" +

                 "4,6,9\n" +

                 "5,8,9\n" +

                 "6,10,8\n" +

                 "7,12,6\n" +

                 "8,10,3\n",

                 {

                     // options go here. See http://dygraphs.com/options.html

                     legend: 'always',

                     animatedZooms: true,

                     title: 'dygraphs chart template',

                     underlayCallback: function(ctx, area) {

                       var mm = calcMinMax(this),

                           ymin = mm[0],

                           ymax = mm[1],

                           canvasYmin = this.toDomYCoord(ymin),

                           canvasYmax = this.toDomYCoord(ymax);

                       ctx.strokeStyle= 'red';

                       ctx.beginPath();

                       ctx.moveTo(area.x, canvasYmin);

                       ctx.lineTo(area.x + area.w, canvasYmin);

                       ctx.moveTo(area.x, canvasYmax);

                       ctx.lineTo(area.x + area.w, canvasYmax);

                       ctx.closePath();

                       ctx.stroke();       

                     }

                 });