1

I have made a web page with html + JavaScript. My goal is to read temperature data from a text file and print it as a chart.

The text file looks like this:

23.03.18 16:49:01,C,23,652
23.03.18 18:04:01,C,24,152
23.03.18 18:07:01,C,25,342

The first bracket shows the time, when the temperature was measured.
23,652 is the teamperature in Celsius (C...Celsius).

I can split the data but don't know how to print the temperature data into a chart. Moreover, I want to combine my two program parts, but don't know how to do it.. 

// READ FILE

var openFile = function(event) {
  var input = event.target;

  var reader = new FileReader();
  reader.onload = function() {
    var text = reader.result;
    var node = document.getElementById('output');

    node.innerText = text;
    console.log(text);
    var newText = text.replace('\n', ",");
    var fields = newText.split(",");

    var date = fields[0];
    var format = fields[1];
    var temp1 = fields[2];
    var temp2 = fields[3];
  };
  reader.readAsText(input.files[0]);
};

// CHART

var ctx = document.getElementById("myChart").getContext('2d');
var date = ["23.03.18 18:04:01", "23.03.18 18:04:01", "23.03.18 18:04:01", "23.03.18 18:04:01", "23.03.18 18:04:01", "23.03.18 18:04:01", "23.03.18 18:04:01"]
var temps = ["23.652", "20", "30", 40, 50, 60, 20, 30, 40, 50, 60, 20, 30, 40, 50, 60, 20, 30, 40, 50, 60, 20, 30, 40, 50, 60];
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      data: temps,
      label: "Temperature",

      backgroundColor: [
        'rgba(54, 162, 235, 0.2)'
      ],
      borderColor: [
        'rgba(54, 162, 235, 1)',
      ],
      borderWidth: 1
    }],
    labels: ['23.03.18 20:29:01', '23.03.18 18:07:01', 'March', 'April', 'May', 'June', 'February', 'March', 'April', 'May', 'June', 'February', 'March', 'April', 'May', 'June', 'February', 'March', 'April', 'May', 'June'],
  },
  options: {
    title: {
      display: true,
      text: 'Temperature'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<div id='output'></div>
Nope
  • 22,147
  • 7
  • 47
  • 72
Patrick
  • 11
  • 1
  • 1
    What is the error? You can try embedding your "Chart" code within the reader.onload function, and replace the variables accordingly. – ggbranch Mar 26 '18 at 08:56
  • @ggbranch I am a noob...so i don't know how to correctly split my file and print the data into the chart. I added this var result = text.split("\n") for(var i=0; i – Patrick Mar 26 '18 at 17:33

0 Answers0