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:

4 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