How do I get the data from a txt file and play in html to generate a chart ??
I'm using that HighCharts tool, and I'd like to know how to play the values on the date, so I can generate the chart.
series: [{
name: 'Sensor 1',
data: [12 , 15 ,30, 10,]
}]
Thank you in advance.
You can create your file as a
.csv(comma-separated values), similar to this:
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
Separate it into lines using .split:
linhas = texto.split(/\r\n|\n/);
And then commas:
prov = linhas[j].split(',');
Next we create a "graphic" object, whose
.series.dataproperty is the information of your graphic itself:
grafico.series[j] = [];
grafico.series[j].data = prov; // atribuindo o gráfico lido acima
And finally we created our chart:
Highcharts.chart('container', grafico);
The result:
Trytheexamplebelow!
(Createafileseparatedbycommasandlinesliketheoneshownabovefortesting)
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><scriptsrc="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<input type="file" id="arquivo"/>