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:
It took me a while to figure this out, I wish I could have known this before ^^
ReplyDeleteInteresting anyway, thanks.
Yeah. It's about to get much clearer.
ReplyDeleteLike so:
{
series : {
T : { axis : 'y2' },
S : { axis : 'y2' }
}
}
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?
ReplyDeleteMaxwell, your question is perfect for the mailing list. I suggest you go there. https://groups.google.com/forum/#!forum/dygraphs-users
ReplyDeleteIt is an old blog but still extremely useful. Many thanks.
ReplyDeleteA 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'}}
});
Thanks, but if I did not miss out on anything, I still need help on my prev question:
DeleteCan 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
});
Hi Guys, thanks again and another question.
ReplyDeleteFor 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
PD, that's because this is out of date. See http://blog.dygraphs.com/2012/12/the-new-and-better-way-to-specify.html
ReplyDeletePD, see http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomCoords which shows you that toDomCoords accepts an axis parameter.
ReplyDeleteMany thanks Robert. This is very useful. Best, PD
DeleteBTW, 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
Sweet!
Delete