Friday, November 23, 2012

Using the second y-axis

Short summary: Consider all the series you want on the right-side axis. Choose one as (for lack of a better term) the master series. For that series, add the option axis : {}. For the others, use axis : 'T', replacing T with the master series' name. Yes, we know this is confusing, and we have some ideas for fixing it.

Update: The behavior for specifying a second y-axis has been simplified. See this recent post.

One of the nice new features Dan added to Dygraphs was the ability to use a second y-axis. Unfortunately, we all agree the mechanism to specify using the second y-axis is a little confusing, so this post ought to make things easier to understand.

Take note, though, that we're working out a proposal to make using the second y-axis easier to understand, so please feel free to read and comment as you see fit. (Once we simplify the API for using the second y-axis, this post will be obsolete, but hopefully it'll be replaced by another one. (Remind me to add references to this post when that time comes.))

Demonstration: Here's a graph with three series (named R, S and T), all on the left-side y-axis.

To move one of the series to the right-side y-axis, you need to add an option for the series. For instance, let's move series T to the right-side:
T : {
  axis : { }
}

The short explanation of what this means is that it instructs Dygraphs to create a new axis, and assign T to it.

Which looks like this:

You might think that if you wanted to add S to the right axis you would add
S : {
  axis : { }
}
but if you did, you would get this error:

dygraphs: Only two y-axes are supported at this time. (Trying to use 3) (axes.js:65:7) 

Yeah, confusing. Instead, what you do is:
S : {
  axis : 'T'
}
This says that whatever axis T is on, put S there too.

Here's what it looks like:

11 comments:

  1. It took me a while to figure this out, I wish I could have known this before ^^

    Interesting anyway, thanks.

    ReplyDelete
  2. Yeah. It's about to get much clearer.

    Like so:

    {
    series : {
    T : { axis : 'y2' },
    S : { axis : 'y2' }
    }
    }

    ReplyDelete
  3. I've found that if I use a second y axis, and then call updateOptions() to no longer use one (because I'm changing the data being plotted), the region of the canvas that lies where the right-hand axis was displayed is not drawn (this region is blank). Resizing the browser window will cause the graph to be shown properly. Is this a bug, or am I just Doing It Wrong?

    ReplyDelete
  4. Maxwell, your question is perfect for the mailing list. I suggest you go there. https://groups.google.com/forum/#!forum/dygraphs-users

    ReplyDelete
  5. It is an old blog but still extremely useful. Many thanks.
    A quick question. Can you substitute the name of 'T' or 'S' with a variable? It seems not to be working.

    Example:
    var y2head='Y2 Legend with Space';
    statchart = new Dygraph(
    document.getElementById("ia_stat_plot"),
    statvarfile,//dygraph_defn
    {
    legend : 'always',
    animatedZooms: true,
    title : 'Mutli-theme plots (e.g., Y1:SST, Y2:OC)',
    series : {y2head:{axis:'y2'}}
    });

    ReplyDelete
    Replies
    1. Thanks, but if I did not miss out on anything, I still need help on my prev question:

      Can you substitute the name of 'T' or 'S' in 'series' with a variable? It seems not to be working.

      Example:
      var y2head='Y2 Legend with Space';

      // calling dygraph here
      statchart = new Dygraph(
      document.getElementById("ia_stat_plot"),
      statvarfile,
      {
      legend : 'always',
      animatedZooms: true,
      title : 'Mutli-theme plots',
      series : {y2head:{axis:'y2'}} // y2head is a string variable
      });

      Delete
  6. Hi Guys, thanks again and another question.
    For a second(ary) Y-axis plot, how can one make corresponding changes in the 'toDomCoords' coordinates. E.g., I have some polynomial fit functions for multiple lines plotted on the standard Y-axis (Y1). Now after using Y1, and Y2, the curve fitting calculates fit values properly but plots the fit following the standard Y1 axis.

    var p1 = g.toDomCoords(x1, y1);
    var p2 = g.toDomCoords(x2, y2);

    ctx.beginPath();
    ctx.moveTo(p1[0], p1[1]);
    ctx.lineTo(p2[0], p2[1]);
    ctx.closePath();

    (I need the above plot for Y2 (secondary Y-axis)

    Thanks, PD

    ReplyDelete
  7. PD, that's because this is out of date. See http://blog.dygraphs.com/2012/12/the-new-and-better-way-to-specify.html

    ReplyDelete
  8. PD, see http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomCoords which shows you that toDomCoords accepts an axis parameter.

    ReplyDelete
    Replies
    1. Many thanks Robert. This is very useful. Best, PD


      BTW, after using DYGRAPHS for US NOAA SQUAM (https://www.star.nesdis.noaa.gov/sod/sst/squam/), recently I used for for an European Inter-governmental agency: http://metis.eumetsat.int/sst/index.html

      Delete