A javascript chart with TXT values instead of a website

Question

I'm a student with no knowledge of programming but for my project I need to make a chart based on a txt file values to show sensor data. I found this chart which gets his values from a website. But I want to adjust this so it can get it values from a txt files on my pc. Can someone please help me to do this?

<!DOCTYPE HTML>
<html>
<head>
<script src="foo.txt"></script>
<script>
  console.log(text);
</script>
<script>
// This becomes the content of your foo.txt file
let text = `
My test text goes here!
`;
//chart
window.onload = function() {

  var dataPoints = [];

  var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2",
    title: {
      text: "Live Data"
    },
    data: [{
      type: "line",
      dataPoints: dataPoints
    }]
  });
  updateData();

  // Initial Values
  var xValue = 0;
  var yValue = 10;
  var newDataCount = 6;

  function addData(data) {
    if (newDataCount != 1) {
      $.each(data, function(key, value) {
        dataPoints.push({
          x: value[0],
          y: parseInt(value[1])
        });
        xValue++;
        yValue = parseInt(value[1]);
      });
    } else {
      //dataPoints.shift();
      dataPoints.push({
        x: data[0][0],
        y: parseInt(data[0][1])
      });
      xValue++;
      yValue = parseInt(data[0][1]);
    }

    newDataCount = 1;
    chart.render();
    setTimeout(updateData, 1500);
  }
  function updateData() {
    $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=" + xValue + "&ystart=" + yValue + "&length=" + newDataCount + "type=json", addData);
  }

}


</script>
</head>
<body>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>

[Nothing here you can use](https://www.google.com/search?q=javascript+load+text+file+from+local+file+site:stackoverflow.com) ? — mplungjan, Jan 23 '21 at 19:28
Also you have an ancient jQuery here I upgraded you to a later canvasjs and a later jQUery — mplungjan, Jan 23 '21 at 19:29
And your file needs to be on the format `[[0, 7], [1, 12], [2, 7], [3, 3], [4, 0], [5, 4]]` — mplungjan, Jan 23 '21 at 19:34
BUT the file needs to update regularly if you want live data — mplungjan, Jan 23 '21 at 19:35
@mplungjan Hi thanks for get me the newer version. I looked at the link but I dont know how to implement this into my script.....Sorry for being such a newbee — Regiusmaps, Jan 23 '21 at 19:59
@mplungjan, Hi I copied the code of the webpage u sent, but it doesnt show me any values on the page so what I'm doing wrong — Regiusmaps, Jan 23 '21 at 20:23

score 0 · Answer 1 · answered Jan 24 '21 at 07:26

Have a look at

https://plungjan.name/SO/chart/

data.js:

let xValue = 0, yValue = 10, newDataCount = 6; // overwritten for some reason
const dataArr = [[0, 7], [1, 12], [2, 7], [3, 3], [4, 0], [5, 4]]

<!DOCTYPE HTML>
<html>
<head>
<title>Chart</title>    
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<script src="data.js"></script>
<script>
let chart, dataPoints=[];
function getChart() { // sigleton
  if (!chart) {
    chart = new CanvasJS.Chart("chartContainer", {
      theme: "light2",
      title: {
        text: "Live Data"
      },
      data: [{
        type: "line",
        dataPoints: dataPoints
      }]
    });
  }
  return chart;
}


function updateData() {
  addData(dataArr); // the var in data.js - this will be called every 1.5 secs
}

function addData(data) {
  if (newDataCount != 1) {
    $.each(data, function(key, value) {
      dataPoints.push({
        x: value[0],
        y: parseInt(value[1])
      });
      xValue++;
      yValue = parseInt(value[1]);
    });
  } else {
    //dataPoints.shift();
    dataPoints.push({
      x: data[0][0],
      y: parseInt(data[0][1])
    });
    xValue++;
    yValue = parseInt(data[0][1]);
  }
  newDataCount = 1;
  getChart().render();
  setTimeout(updateData, 1500);
}


window.addEventListener("load", function() {
  updateData();
});


</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
</body>
</html>

A javascript chart with TXT values instead of a website

1 Answers1