1

Como faço para pegar os dados de um arquivo txt e jogar no html para gerar um gráfico??

Estou usando aquela ferramenta HighCharts, e gostaria de saber como jogar os valores no data, para poder gerar o gráfico.

series: [{
    name: 'Sensor 1',
    data: [12 , 15 ,30, 10,]
}]

grato desde já.

1 Resposta 1

0

Você pode criar seu arquivo como um .csv (comma-separated values), parecido com este:

0,1,3,7,10,10,9,7,7,6
5,4,3,3,4,4,5,6,7,10
8,8,7,8,7,7,6,4,3,2

Separá-lo em linhas usando .split:

linhas = texto.split(/\r\n|\n/);

E depois por vírgulas:

prov = linhas[j].split(',');

Depois a gente cria um objeto "gráfico", cuja propriedade .series.data são as informações do seu gráfico propriamente dito:

grafico.series[j] = [];
grafico.series[j].data = prov; // atribuindo o gráfico lido acima

E finalmente criamos o nosso chart:

Highcharts.chart('container', grafico);

O resultado:

gráfico renderizado

Teste o exemplo abaixo!
(Crie um arquivo separado por vírgulas e linhas como o demonstrado acima para testar)

document.getElementById('arquivo').addEventListener('change', abrirArquivo, false);

var leitor = new FileReader();
var linhas;
var grafico = [];
var prov = [];
grafico.series = [];

function abrirArquivo(a) {
  var arquivo = a.target.files[0];
  if (!arquivo) {
    return;
  }
  leitor.readAsText(arquivo);
  
  }
  
  leitor.onload = function(e) {
    var conteudo = e.target.result;
    lerDados(conteudo);
  };

function lerDados(texto) {
    linhas = texto.split(/\r\n|\n/);

    for (var j = 0; j < linhas.length; j++) {
        prov = linhas[j].split(',');
        for(var i=0; i<prov.length; i++) {
            prov[i] = parseInt(prov[i], 10);
        }

        grafico.series[j] = [];
        grafico.series[j].data = prov;
        // grafico.series[j].name = "test";
    }
    Highcharts.chart('container', grafico);
}
#container {
	min-width: 400px;
	max-width: 400px;
	height: 270px;
	margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<input type="file" id="arquivo"/>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .