Adding a line in the y axis with a flexible X

plotly.js
1

Hi all,
I have a graph with data that represents the evaluation of patients in a given date, about a given topic. I need to have two lines, to ease the perception of the evaluation. It’s like in the next figure:

58
Screen Shot 2018-02-08 at 12.48.58.png1956×1104 89 KB

In this case I have setted the x0 to: ‘2018-01-01’, and x1 to : x1: ‘2118-03-31’

 Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2118-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2118-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        }, {
                            yaxis: {
                                range: [0, 40]
                            }
                        });

Where eixoX is an array of dates.
But I need this to work for many years, so I need to extend the x0 and x1, to 3000, for instance, but the graph turns into something ridiculous as in the next figure

18
Screen Shot 2018-02-08 at 12.49.18.png1338×1010 17.7 KB

How can I set the x0 and x1 according to the eixoX values?

I would also like to have the lines more centered in the graph and not in the edges (having more values up and down)

Thanks

2

Sounds like you need to set layout.xaxis.range and layout.yaxis.range.

In your code snippet above, it looks like your yaxis container isn’t part of the layout argument passed to Plotly.newPlot.

3

Sorry, I didn’t showed the whole code:

 Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2018-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2018-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        }, {
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX ?
                            }
                        });



                        window.onresize = function() {
                            Plotly.Plots.resize(gd);
                        };

How should I define the ranges?

4

like this:

 Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2018-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2018-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }],
                   // N.B. here!
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX ?
                            }
                        });
5

Sorry Etienne but I’m not following.

I made this changes but the problem remains because the x0 and x1 are still static. With this code, I get this result.

Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2118-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2118-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        }, {
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX
                            }
                        });




                        window.onresize = function() {
                            Plotly.Plots.resize(gd);
                        };

45
Screen Shot 2018-01-04 at 19.30.45.jpg1416×1560 70 KB

If I do

Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: eixoX,
                                y0: 25,
                                x1: eixoX,
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: eixoX,
                                y0: 36,
                                x1: eixoX,
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        }, {
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX
                            }
                        });

I get no lines

34
Screen Shot 2018-01-04 at 19.27.34.jpg852×1622 53.2 KB

6

the

                 yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX
                            }

part you’re sending to Plotly.newPlot is in the wrong container object.

7

I’m not using Plotly.newPlot, but Plotly.Plot and Plotly.Plots to resize the window. Does it matter?
I’ve changed to:

Plotly.plot(gd, [{
                            x: eixoX,
                            y: eixoY,
                            mode: 'lines+markers',
                            type: 'scatter',
                            // type: 'bar',
                            name: 'ORS da Sessão',
                            height: 200,
                            marker: {
                                color: 'tomato',
                                size: 16
                            }
                        }], {
                            shapes: [{
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 25,
                                x1: '2118-03-31',
                                y1: 25,
                                line: {
                                    color: 'red',
                                    width: 2
                                }
                            }, {
                                type: 'line',
                                x0: '2018-01-01',
                                y0: 36,
                                x1: '2118-03-31',
                                y1: 36,
                                line: {
                                    color: 'blue',
                                    width: 2
                                }
                            }]
                        });

                        var layout = {
                            yaxis: {
                                range: [0, 40]
                            },
                            xaxis: {
                                range: eixoX
                            }
                        }



                        window.onresize = function() {
                            Plotly.Plots.resize(gd, layout);
                        };

but the result is the same, as in the first figure.

8

They behave the same in this case.

Plotly.Plots.resize only accept one argument, so your layout attempt is ignored.

I’m not sure what else I can do to help. Have you tried copy/pasting Adding a line in the y axis with a flexible X - #4 by etienne ?

the xaxis and yaxis attribute container should be side-by-side with shapes.

9

well, it worked :slight_smile:
I hadn’t tried…

Thanks!

10

well, it wasn’t working like I want, but I changed the x0 and x1 to a variable depending on the eixoX values and now it’s working.

let x0 = eixoX[0];
let x1 = eixoX[eixoX.length - 1];

…

shapes: [{
            type: 'line',
            x0: x0,
            y0: 25,
            x1: x1,
            y1: 25,
            line: {
                color: 'red',
                width: 2
            }

Can I ask you an aside question? because I want to add another trace, but as I’m not doing with the newPlot function, I’m not sure how to do it.
Thanks!