Hover informations on heatmap not working

plotly.js
1

With this code I try to create a heatmap, but i can’t go trough because I need the hover information that came with the lib, but I’m only have a few. Only the points on the corner are working. with small data/ random works fine.

I have another problem, but I’m not comfortable to create another topic. I’ts possible to use a scatterGL to create a heatmap. Using z to change the colors? And return the value of the z? Like in the heatmap I’m saying.

<!DOCTYPE html>
<html>
<head>
<!-- Plotly.js -->
<meta charset="UTF-8" />
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width:100%;height:100%"></div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
var xData=[ ];
var zData=[ ];

  $(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 data = [{
                    x: xData[0],
                    y: ['2018-01-11','2018-01-12','2020-01-13'],
                    z: zData,
                    type: 'heatmap'
                  }];


        Plotly.newPlot('myDiv', data);
      }

    });


  });

  function processData(allText) {


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

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

    for (var i=0; i<allTextLines.length; i++)
    {

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


      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) ;
      zData.push(linesZ) ;
  }
</script>
</body>
</html>

These are the csv files:
https://drive.google.com/drive/folders/1KvzLtQaFjyooAwDNtOkgRDrQnNVWo6I9?usp=sharing![hover|690x236]

Only a few points on the corner are showing
(upload://aUTfiviik8o2qoCLCWbUyxUz1uM.png)