Plotly.js第二个Y轴未缩放

Question

I have data with two separate sets of xy data. The x values are both dates within a common range (but different specific points). The y values are for completely different data with different ranges.

1. The left-hand y data is autoscaling so that it maximally uses the [0,1] domain. The right-hand y data isn't.

2. I selected autoscale for both y axes in the GUI. The left axis still came up with some strange range for the data which shows in the gui and JSON although the JSON does have autorange=true.

3. The right axis does not show autorange in the GUI. {
data:[
{
name:"Col2", type:"scatter", mode:"lines+markers", xsrc:"arielbalter:21:4b225a", ysrc:"arielbalter:21:10a1f9", uid:"d0ee8f" }, {
name:"Col4", type:"scatter", mode:"lines+markers", xsrc:"arielbalter:21:3aee4d", ysrc:"arielbalter:21:6eee6c", uid:"502656" } ], layout:{
yaxis:{
type:"linear", range:[
-737.9094809575623, 13174.640480957562 ], autorange:true, tickmode:"auto", showline:true }, xaxis:{
type:"date", range:[
1383440400000, 1434808800000 ], autorange:true }, height:801, width:1616, autosize:true, yaxis2:{
overlaying:"y", side:"right", anchor:"x", showline:true } } }

Here I took the auto-generated javascript and manually set to autorange:

https://jsfiddle.net/abalter/rre2Lma2/

var trace1 = {
  x: ["2013-12-04 00:00:00.0", "2014-02-10 00:00:00.0", "2014-04-07 00:00:00.0", "2014-06-02 00:00:00.0", "2014-07-21 00:00:00.0", "2014-08-18 00:00:00.0", "2014-08-25 00:00:00.0", "2014-09-02 00:00:00.0", "2014-09-15 00:00:00.0", "2014-09-22 00:00:00.0", "2014-09-29 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-20 00:00:00.0", "2014-10-27 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-17 00:00:00.0", "2014-11-24 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-15 00:00:00.0", "2015-04-27 00:00:00.0", "2015-05-20 00:00:00.0"], 
  y: ["12395", "7367", "211", "400", "5706", "1131", "529", "283", "180", "280", "270", "266", "537", "758", "623", "1346", "1252", "1629", "5890", "6680", "5750"], 
  mode: "lines+markers", 
  name: "Col2", 
  type: "scatter", 
  uid: "d0ee8f", 
  xsrc: "arielbalter:21:4b225a", 
  ysrc: "arielbalter:21:10a1f9"
};
var trace2 = {
  x: ["2013-12-04 00:00:00.0", "2013-12-09 00:00:00.0", "2013-12-13 00:00:00.0", "2013-12-14 00:00:00.0", "2013-12-15 00:00:00.0", "2013-12-19 00:00:00.0", "2013-12-20 00:00:00.0", "2013-12-21 00:00:00.0", "2013-12-22 00:00:00.0", "2013-12-30 00:00:00.0", "2014-01-08 00:00:00.0", "2014-01-22 00:00:00.0", "2014-01-22 00:00:00.0", "2014-02-03 00:00:00.0", "2014-02-10 00:00:00.0", "2014-02-18 00:00:00.0", "2014-02-24 00:00:00.0", "2014-03-07 00:00:00.0", "2014-03-10 00:00:00.0", "2014-03-10 00:00:00.0", "2014-03-17 00:00:00.0", "2014-03-24 00:00:00.0", "2014-04-07 00:00:00.0", "2014-04-07 00:00:00.0", "2014-04-14 00:00:00.0", "2014-04-21 00:00:00.0", "2014-05-05 00:00:00.0", "2014-05-05 00:00:00.0", "2014-05-12 00:00:00.0", "2014-05-19 00:00:00.0", "2014-06-02 00:00:00.0", "2014-06-02 00:00:00.0", "2014-06-09 00:00:00.0", "2014-06-16 00:00:00.0", "2014-07-01 00:00:00.0", "2014-07-07 00:00:00.0", "2014-07-14 00:00:00.0", "2014-07-21 00:00:00.0", "2014-07-28 00:00:00.0", "2014-08-04 00:00:00.0", "2014-08-18 00:00:00.0", "2014-08-18 00:00:00.0", "2014-09-02 00:00:00.0", "2014-09-15 00:00:00.0", "2014-09-22 00:00:00.0", "2014-09-29 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-20 00:00:00.0", "2014-10-27 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-17 00:00:00.0", "2014-11-24 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-15 00:00:00.0", "2014-12-22 00:00:00.0", "2015-01-05 00:00:00.0", "2015-01-07 00:00:00.0", "2015-01-13 00:00:00.0", "2015-02-10 00:00:00.0", "2015-03-02 00:00:00.0", "2015-03-10 00:00:00.0", "2015-03-12 00:00:00.0", "2015-03-31 00:00:00.0", "2015-04-13 00:00:00.0", "2015-04-27 00:00:00.0"], 
  y: ["47.673", "47.628", "46.7", "50", "51.5", "52.4", "49", "49.2", "50.1", "49.85", "48.263", "45.224", "45.723", "45.36", "47", "47.2", "47.4", "47.537", "47.854", "47.8", "48.6", "48.7", "48.671", "48.6", "48.852", "48.4", "49.079", "49.079", "48.9", "49.4", "48.716", "48.716", "49.442", "48.807", "48.852", "48.535", "48.807", "47.6", "48.444", "48.8", "48.127", "48.127", "48.3", "49.125", "48.9", "49.2", "47.945", "47.945", "48.2", "47.9", "47.083", "47.083", "46.9", "46.9", "46.085", "46.085", "45.9", "45.2", "45.088", "44.815", "44.725", "41.731", "42.23", "45.088", "42.593", "43.137", "44.815", "42.956"], 
  mode: "lines+markers", 
  name: "Col4", 
  type: "scatter", 
  uid: "502656", 
  xsrc: "arielbalter:21:3aee4d", 
  ysrc: "arielbalter:21:6eee6c"
};
var data = [trace1, trace2];
var layout = {
  autosize: true, 
  height: 761, 
  width: 1616, 
  xaxis: {
    autorange: true, 
    range: [1.38617155299e+12, 1.43454849026e+12], 
    type: "date"
  }, 
  yaxis: {
    autorange: true, 
    showline: true, 
    tickmode: "auto", 
    type: "linear"
  }, 
  yaxis2: {
    anchor: "x", 
    autorange: true, 
    overlaying: "y", 
    showline: true, 
    side: "right"
  }
};
Plotly.plot('plotly-div', data, layout);

https://plot.ly/~arielbalter/23/col2-vs-col4/

Answer 1

old question but thought I'd toss an answer to it. The data sets need to refer to the axis they are to be plotted on.

It looks like the only way to refer to them is y1, y2, y3...

I added "yaxis: 'y2'" into your jfiddle on the second data set and the plot looked much better.

https://jsfiddle.net/yjyea8cg/2/

var trace1 = {
  x: ["2013-12-04 00:00:00.0", "2014-02-10 00:00:00.0", "2014-04-07 00:00:00.0", "2014-06-02 00:00:00.0", "2014-07-21 00:00:00.0", "2014-08-18 00:00:00.0", "2014-08-25 00:00:00.0", "2014-09-02 00:00:00.0", "2014-09-15 00:00:00.0", "2014-09-22 00:00:00.0", "2014-09-29 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-20 00:00:00.0", "2014-10-27 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-17 00:00:00.0", "2014-11-24 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-15 00:00:00.0", "2015-04-27 00:00:00.0", "2015-05-20 00:00:00.0"], 
  y: ["12395", "7367", "211", "400", "5706", "1131", "529", "283", "180", "280", "270", "266", "537", "758", "623", "1346", "1252", "1629", "5890", "6680", "5750"], 
  mode: "lines+markers", 
  name: "Col2", 
  type: "scatter", 
  uid: "d0ee8f", 
  xsrc: "arielbalter:21:4b225a", 
  ysrc: "arielbalter:21:10a1f9",
};
var trace2 = {
  x: ["2013-12-04 00:00:00.0", "2013-12-09 00:00:00.0", "2013-12-13 00:00:00.0", "2013-12-14 00:00:00.0", "2013-12-15 00:00:00.0", "2013-12-19 00:00:00.0", "2013-12-20 00:00:00.0", "2013-12-21 00:00:00.0", "2013-12-22 00:00:00.0", "2013-12-30 00:00:00.0", "2014-01-08 00:00:00.0", "2014-01-22 00:00:00.0", "2014-01-22 00:00:00.0", "2014-02-03 00:00:00.0", "2014-02-10 00:00:00.0", "2014-02-18 00:00:00.0", "2014-02-24 00:00:00.0", "2014-03-07 00:00:00.0", "2014-03-10 00:00:00.0", "2014-03-10 00:00:00.0", "2014-03-17 00:00:00.0", "2014-03-24 00:00:00.0", "2014-04-07 00:00:00.0", "2014-04-07 00:00:00.0", "2014-04-14 00:00:00.0", "2014-04-21 00:00:00.0", "2014-05-05 00:00:00.0", "2014-05-05 00:00:00.0", "2014-05-12 00:00:00.0", "2014-05-19 00:00:00.0", "2014-06-02 00:00:00.0", "2014-06-02 00:00:00.0", "2014-06-09 00:00:00.0", "2014-06-16 00:00:00.0", "2014-07-01 00:00:00.0", "2014-07-07 00:00:00.0", "2014-07-14 00:00:00.0", "2014-07-21 00:00:00.0", "2014-07-28 00:00:00.0", "2014-08-04 00:00:00.0", "2014-08-18 00:00:00.0", "2014-08-18 00:00:00.0", "2014-09-02 00:00:00.0", "2014-09-15 00:00:00.0", "2014-09-22 00:00:00.0", "2014-09-29 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-13 00:00:00.0", "2014-10-20 00:00:00.0", "2014-10-27 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-10 00:00:00.0", "2014-11-17 00:00:00.0", "2014-11-24 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-08 00:00:00.0", "2014-12-15 00:00:00.0", "2014-12-22 00:00:00.0", "2015-01-05 00:00:00.0", "2015-01-07 00:00:00.0", "2015-01-13 00:00:00.0", "2015-02-10 00:00:00.0", "2015-03-02 00:00:00.0", "2015-03-10 00:00:00.0", "2015-03-12 00:00:00.0", "2015-03-31 00:00:00.0", "2015-04-13 00:00:00.0", "2015-04-27 00:00:00.0"], 
  y: ["47.673", "47.628", "46.7", "50", "51.5", "52.4", "49", "49.2", "50.1", "49.85", "48.263", "45.224", "45.723", "45.36", "47", "47.2", "47.4", "47.537", "47.854", "47.8", "48.6", "48.7", "48.671", "48.6", "48.852", "48.4", "49.079", "49.079", "48.9", "49.4", "48.716", "48.716", "49.442", "48.807", "48.852", "48.535", "48.807", "47.6", "48.444", "48.8", "48.127", "48.127", "48.3", "49.125", "48.9", "49.2", "47.945", "47.945", "48.2", "47.9", "47.083", "47.083", "46.9", "46.9", "46.085", "46.085", "45.9", "45.2", "45.088", "44.815", "44.725", "41.731", "42.23", "45.088", "42.593", "43.137", "44.815", "42.956"], 
  mode: "lines+markers", 
  name: "Col4", 
  type: "scatter", 
  uid: "502656", 
  xsrc: "arielbalter:21:3aee4d", 
  ysrc: "arielbalter:21:6eee6c",
  yaxis: 'y2',

};
var data = [trace1, trace2];
var layout = {
  autosize: true, 
  height: 761, 
  width: 1616, 
  xaxis: {
    autorange: true, 
    range: [1.38617155299e+12, 1.43454849026e+12], 
    type: "date"
  }, 
  yaxis: {
    autorange: true, 
    showline: true, 
    tickmode: "auto", 
    type: "linear"
  }, 
  yaxis2: {
    anchor: "x", 
    autorange: true, 
    overlaying: "y", 
    showline: true, 
    side: "right"
  }
};
Plotly.plot('plotly-div', data, layout);