Getting Data points for canvasjs from a text file

Im trying to make a chart that dynamically gets plot values from a .txt file. Here i can produce a simple chart with canvasjs this is the exact kind of chart i need to make except for it should get x values from a .txt file dynamically.

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Percents",
       fontFamily: "Impact",
        fontWeight: "normal"
      },

      legend:{
        verticalAlign: "bottom",
        horizontalAlign: "center"
      },
      data: [
      {
        //startAngle: 45,
       indexLabelFontSize: 20,
       indexLabelFontFamily: "Garamond",
       indexLabelFontColor: "darkgrey",
      indexLabelLineColor: "darkgrey",
       indexLabelPlacement: "outside",
       type: "doughnut",
       showInLegend: true,
       dataPoints: [
       {  y: 55, legendText:"55%", indexLabel: "55%" },
       {  y: 45, legendText:"45%", indexLabel: "45%" },
       ]
     }
     ]
   });

     chart.render();
   }
   </script>
   <script type="text/javascript" src="canvasjs.min.js"></script></head>
     <body>
       <div id="chartContainer" style="height: 300px; width: 100%;">
       </div>
     </body>
 </html>

Here i try but it fails

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var dataPoints = [];

//Replace text file's path according to your requirement.
$.get("MYFILE.txt", function(data) {
var x = 0;
var allLines = data.split('\n');
if(allLines.length > 0) {
    for(var i=0; i< allLines.length; i++) {
        dataPoints.push({x: x , y: parseInt(allLines[i])});
        x += .25;
    }
}
var chart = new CanvasJS.Chart("chartContainer",{
    title :{
        text: "Chart using Text File Data"
    },
    data: [{
        type: "line",
        dataPoints : dataPoints,
    }]
});
chart.render();
});
}
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

It doesnt even give me any errors to debug.

EDIT: Content of .TXT file is very simple

MYFILE.txt

Solution

As this code, where I only replaced the ajax request by hardcoded data, is working, it has to be a problem with the ajax request itself.

var dataPoints = [];

(function(data) {
  var x = 0;
  var allLines = data.split('\n');
  if(allLines.length > 0) {
      for(var i=0; i< allLines.length; i++) {
          dataPoints.push({x: x , y: parseInt(allLines[i])});
          x += .25;
      }
  }
  var chart = new CanvasJS.Chart("chartContainer",{
      title :{
          text: "Chart using Text File Data"
      },
      data: [{
          type: "line",
          dataPoints : dataPoints,
      }]
  });
  chart.render();
})("1\n2\n4\n3");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/jquery.canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

As we found out in the comments, it is as I assumed, that you are trying to run the files from the file system via file:/// in your browser, instead of a (local) web server, but ajax requests are not executable in this environment for security reasons.