Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

113
Visualizações
Reading numbers from array in javascript and plotting these using plotly

I'm trying to make an interface that lets a user upload CSV files and plots these using plotly, only using javascript and obviously the plotly library. I'm close, but my suspicion is that there's an issue with the asynchronous reading of the csv files. As you can probably see, I'm relatively new to javascript, so any feedback is welcome. I cannot however use any other libraries or packages plotly.

The problem is that the resulting figure only shows the initialized values (1).

EDIT: The heatmap function works on test data, or if I modify specific elements of the data_y object, just not when I update the information from the file.

  1. There's a button that allows uploading of the csv files. On event this code triggers:
<script>
let picker  = document.getElementById('picker');

picker.addEventListener('change', event => {0
    file_list  = event.target.files;
    var fig_y  = [];

    for (let i = 0 ; i< file_list.length ; i++){
    if(file_list[i].name == (".DS_Store")){continue}
    else {
    var ready = read_data(file_list[i]); 
    fig_y.push(ready);
    }
    }   
    console.log(fig_y);
    plot_heatmap(fig_y);
}
);
</script>
  1. The data is read using this code.
<script>
function read_data(input){
    var xs = 1212;               // length of the data
    file_contents = [];
    var data_y    = Array(xs).fill(1);
    let file      = input;
    
    let reader    = new FileReader();
    reader.readAsText(file);
    reader.onload   = function(){
    file_contents = reader.result.split('\n');

// open the data file. First two lines contain a description of the data.
    for (let j  = 2 ; j<file_contents.length-1 ; j++) {
// the relevant data is the third number in the column
    var nr = file_contents[j].split(",").map(Number)[2];  
    data_y[j-2] =   nr;
    }
    }
    return data_y;
}
</script>
  1. the code that makes the plotly heatmap.
<script>
function plot_heatmap(data_z){

    var data = [
      {
           z: data_z,
        type: 'heatmap'
      }
];
Plotly.newPlot('raw_data', data);
    };
</script>
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

OK, so I figured out the answer. It comes from the asynchronous reading of the text files. Putting the plot_heatmap function in the following Timeout function solved the issue (well, maybe it's more a workaround).

setTimeout(() => { plot_heatmap(fig_y); }, 100);

Actually, by changing the length of the timeout, I could catch JS in its act and see half the heatmap filled in with the real values and the other half still with the initialized value!

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda