Horizontal line to show average in dygraph

Question

I am trying to add a horizontal line to dygraph which already show my time series data.

I have average of the complete data which I want to show as a static horizontal line on dygraph.

Does anyone know how to do that simply.

I already checked following links: http://dygraphs.com/tests/highlighted-region.html view-source:http://dygraphs.com/tests/crosshair.html

There must be some simple solution to this

Answer 1

As danvk mentioned before, try specifying the "underlayCallback" option within your "new Dygraph()" call. Use HTML Canvas context to draw the line.

Example below: (xmin and xmax are your unix epoch time in milliseconds)

var yavg= 50, xmin=1357016400000, xmax=1359694800000;
new Dygraph(document.getElementById('graph1'), data,{
  (....other options....),
  underlayCallback:function(ctx,area,dygraph){      
    var xl = dygraph.toDomCoords(xmin,yavg);
    var xr = dygraph.toDomCoords(xmax,yavg);
    ctx.strokeStyle= 'green';
    ctx.beginPath();
    ctx.moveTo(xl[0],xl[1]);
    ctx.lineTo(xr[0],xr[1]);
    ctx.closePath();
    ctx.stroke();       
 }});

Answer 2

Your options are either to use an underlay callback (ala http://dygraphs.com/tests/highlighted-region.html) or to add a second, constant data series.