Diferente Date changing the axis position from the center

plotly.js
1

I using values to the calendar as a String ‘2010-01-11’, ‘2010-01-12’ ‘2010-01-13’ in the Y axis and Than this gave me this:

Capturar5
Capturar51413×763 27.2 KB

But when I change the Strings to ‘2010-01-11 11:00:00’, ‘2010-01-11 11:30:00’, ‘2010-01-11 11:45:00’

The axis move from the center to the left.

Capturar6
Capturar61001×602 20.9 KB

I’ve put on the trace1, trace2 and trace 3 ycalendar:‘gregorian’. My code is this one:

var trace1 = {
  x: xData[0],
  y: yData[0],
  z: zData[0],
  ycalendar: 'gregorian',
  mode: 'lines',
  marker: {
    color: '#1f77b4',
    size: 12,
    symbol: 'circle',
    line: {
      color: 'rgb(0,0,0)',
      width: 0
    }},
  line: {
    color: '#1f77b4',
    width: 2
  },
  type: 'scatter3d'
};

var trace2 = {
  x: xData[1],
  y: yData[1],
  z: zData[1],
  ycalendar: 'gregorian',
  mode: 'lines',
  marker: {
    color: '#9467bd',
    size: 12,
    symbol: 'circle',
    line: {
      color: 'rgb(0,0,0)',
      width: 0
    }},
  line: {
    color: 'rgb(44, 160, 44)',
    width: 2
  },
  type: 'scatter3d'
};

var trace3 = {
  x: xData[2],
  y: yData[2],
  z: zData[2],
  ycalendar: 'gregorian',
  mode: 'lines',
  marker: {
    color: '#bcbd22',
    size: 12,
    symbol: 'circle',
    line: {
      color: 'rgb(0,0,0)',
      width: 0
    }},
  line: {
    color: '#bcbd22',
    width: 2
  },
  type: 'scatter3d'
};

var data = [trace1, trace2, trace3];
var layout = {
  title: '3D Line Plot',
  autosize: false,
  width: 1200,
  height: 800,
  scene: {
    aspectratio: {
      x: 1,
      y: 0.5,
      z: 0.5,

    }
  },
  margin: {
    l: 0,
    r: 0,
    b: 0,
    t: 65
  }
};
Plotly.newPlot('myDiv', data, layout);
2

I can’t replicate the problem with sample data. Would you mind sharing a fully reproducible example to help us debug?

3 
var xData=[ ];
var zData=[ ];
var yData=[ ];

  $(document).ready(function() {
    $.ajax({
      type: "GET",

      url: "C:/Users/mmosk/Desktop/Nova pasta/arquivos_para_fft_mbm/EA01_SD-MGG-MONT-EIXO_PA_-_FFT1.csv",

      dataType: "text",

      success: function(data) {processData(data);}

    });
    $.ajax({
      type: "GET",

      url: "C:/Users/mmosk/Desktop/Nova pasta/arquivos_para_fft_mbm/EA01_SD-MGG-MONT-EIXO_PA_-_FFT2.csv",

      dataType: "text",

      success: function(data) {processData(data);}

    });
    $.ajax({
      type: "GET",

      url: "C:/Users/mmosk/Desktop/Nova pasta/arquivos_para_fft_mbm/EA01_SD-MGG-MONT-EIXO_PA_-_FFT3.csv",

      dataType: "text",

      success: function(data)
      {
        processData(data);
        var trace1 = {
          x: xData[0],
          y: yData[0],
          z: zData[0],
          ycalendar: 'gregorian',
          mode: 'lines',
          marker: {
            color: '#1f77b4',
            size: 12,
            symbol: 'circle',
            line: {
              color: 'rgb(0,0,0)',
              width: 0
            }},
          line: {
            color: '#1f77b4',
            width: 2
          },
          type: 'scatter3d'
        };

        var trace2 = {
          x: xData[1],
          y: yData[1],
          z: zData[1],
          ycalendar: 'gregorian',
          mode: 'lines',
          marker: {
            color: '#9467bd',
            size: 12,
            symbol: 'circle',
            line: {
              color: 'rgb(0,0,0)',
              width: 0
            }},
          line: {
            color: 'rgb(44, 160, 44)',
            width: 2
          },
          type: 'scatter3d'
        };

        var trace3 = {
          x: xData[2],
          y: yData[2],
          z: zData[2],
          ycalendar: 'gregorian',
          mode: 'lines',
          marker: {
            color: '#bcbd22',
            size: 12,
            symbol: 'circle',
            line: {
              color: 'rgb(0,0,0)',
              width: 0
            }},
          line: {
            color: '#bcbd22',
            width: 2
          },
          type: 'scatter3d'
        };

        var data = [trace1, trace2, trace3];
        var layout = {
          title: '3D Line Plot',
          autosize: false,
          width: 600,
          height: 600,
          scene: {
            aspectratio: {
              x: 1,
              y: 1,
              z: 1,
           },
             yaxis: {
                autorange: false,
                type: 'date',
                range:['2018-01-11' 10:00 , '2018-01-11 12:00' ]
            },
          },
          margin: {
            l: 0,
            r: 0,
            b: 0,
            t: 65
          }
        };
        Plotly.newPlot('myDiv', data, layout);
      }

    });


  });

  function processData(allText) {


    var allTextLines = allText.split(/\r\n|\n/);

    var linesY = [];
    var linesX = [];
    var linesZ = [];

    for (var i=0; i<300; i++) {

      var data = allTextLines[i].split(',');

      if (yData.length == 0){
        linesY [i] = '2018-01-11 11:00:00.00';
      }
      if (yData.length == 1){
        linesY [i] = '2018-01-11 11:30:00.00';
      }
      if (yData.length == 2){
        linesY [i] = '2018-01-11 11:50:00.00';
      }

      for (var j=1; j<2; j++)
      {

        linesZ.push(data[j]);

      }
      for (var j=0; j<1; j++)
      {

        linesX.push(data[j]);

      }
    }
      xData.push(linesX) ;
      yData.push(linesY) ;
      zData.push(linesZ) ;
  }

These are the csv files:
https://drive.google.com/drive/folders/1KvzLtQaFjyooAwDNtOkgRDrQnNVWo6I9?usp=sharing

4

I just realized I’m having this exact same problem. You can see my post here:

And this is my pen: