Stacked panels and vertical bar layout

plotly.js
1

Hello everyone,

I am a newbie. I don’t know know if it’s possible but want to give it a try. Here is what I would like to accomplish. I have 3 datasets that I want o stack up in the same page. Now, is it possible to show vertical line down straight through 3 panels that link to a date? And when user hover over one dataset it would show all 3.

Also, I have been putting pieces here and there together so may be it’s wrong. But my graph only display in half of the page in browser. It’s displaying left to right full but not top to bottom. As you can see the bottom page is empty. Thank you in advance.

plotly
plotly.PNG1909×904 19.3 KB
.
` var data = [
{
x: [‘2011-08-08’, ‘2011-08-09’, ‘2011-08-10’],
y: [6, 10, -2],
error_y: {
type: ‘data’,
array: [1, 2, 3],
visible: true
},
type: ‘scatter’,
mode: ‘markers’,
yaxis: ‘y’
},
{
x: [‘2011-08-08’, ‘2011-08-09’, ‘2011-08-10’],
y: [-1, 3, 5],
error_y: {
type: ‘data’,
array: [.7, .8, .9],
visible: true
},
type: ‘scatter’,
mode: ‘markers’,
yaxis: ‘y2’
},
{
x: [‘2011-08-08’, ‘2011-08-09’, ‘2011-08-10’],
y: [2, -4, 6],
error_y: {
type: ‘data’,
array: [.2, .4, .6],
visible: true
},
type: ‘scatter’,
mode: ‘markers’,
yaxis: ‘y3’
}
];

           var layout = {
               //yaxis: {title: "Wind Speed"}, // set the y axis title
                xaxis: {title: 'Date'}, 
                yaxis: {
                  domain: [0, 0.30], 
                  title: 'Up (cm)'
                }, 
                yaxis2: {
                 domain: [0.35, 0.60], 
                  title: 'East (cm)'
                }, 
                yaxis3: {
                  domain: [0.65, 1.0], 
                  title: 'North (cm)'
                },                    
                //xaxis: {
                //    showgrid: false, // remove the x-axis grid lines
                //    tickformat: "%B, %Y"              // customize the date format to "month, day"
                //},
                margin: {// update the left, bottom, right, top margin
                    l: 40, b: 80, r: 10, t: 20
                }
            };

Plotly.newPlot(‘wind-speed’, data, layout);

var myPlot = document.getElementById(‘wind-speed’);
myPlot.on(‘plotly_hover’, function (eventdata){
var points = eventdata.points[0],
pointNum = points.pointNumber;

Plotly.Fx.hover('wind-speed',[
    { curveNumber:0, pointNumber:pointNum },
    { curveNumber:1, pointNumber:pointNum },
    { curveNumber:2, pointNumber:pointNum },
]);

});`

2

This https://plot.ly/javascript/shapes/#vertical-and-horizontal-lines-positioned-relative-to-the-axes is a good place to start.

3

Thanks. I have looked at the example but I want vertical line to cross 3 panels and link 3 dataset together as one. If I could group 3 dataset into annotation would be great. I am still exploring that.