I am dealing with a unique dataset that comprises two sets of x-y data. Both sets have x values representing dates within a common range, albeit at different specific points. The y values associated with each set represent entirely distinct data with varying ranges.
One set of y data on the left-hand side is configured to autoscale and utilize the [0,1] domain optimally, while the other set on the right doesn't follow this pattern.
In the graphical user interface (GUI), I selected autoscale for both y axes. However, the left axis displayed some odd range for the data in the GUI and JSON files, despite having autorange=true in the JSON file.
Unlike the left axis, the right axis does not indicate autorange in the GUI.
{<br> data:[<br> {<br> name:"Col2", type:"scatter", mode:"lines+markers", xsrc:"arielbalter:21:4b225a", ysrc:"arielbalter:21:10a1f9", uid:"d0ee8f" }, {<br> name:"Col4", type:"scatter", mode:"lines+markers", xsrc:"arielbalter:21:3aee4d", ysrc:"arielbalter:21:6eee6c", uid:"502656" } ], layout:{<br> yaxis:{<br> type:"linear", range:[<br> -737.9094809575623, 13174.640480957562 ], autorange:true, tickmode:"auto", showline:true }, xaxis:{<br> type:"date", range:[<br> 1383440400000, 1434808800000 ], autorange:true }, height:801, width:1616, autosize:true, yaxis2:{<br> overlaying:"y", side:"right", anchor:"x", showline:true } } }
After generating the JavaScript code automatically, I manually adjusted it to enable 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", ...],
y: ["12395", "7367", "211", ...],
mode: "lines+markers",
name: "Col2",
type: "scatter",
uid: "d0ee8f"
};
var trace2 = {
x: ["2013-12-04 00:00:00.0", "2013-12-09 00:00:00.0", "2013-12-13 00:00:00.0", ...],
y: ["47.673", "47.628", "46.7", ...],
mode: "lines+markers",
name: "Col4",
type: "scatter",
uid: "502656"
};
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);