Don't know why CanvasJS charting code results in blank page

I'm trying to get an html file to pull data from a csv file and generate a graph in my browser. I'm using the following code from CanvasJS, copied word-for-word, from the final result at the bottom of the page of https://canvasjs.com/docs/charts/how-to/create-charts-from-csv/

<!DOCTYPE html>
<html>
<head>
<title>Chart using XML Data</title>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
    window.onload = function() {
        var dataPoints = [];

        function getDataPointsFromCSV(csv) {
            var dataPoints = csvLines = points = [];
            csvLines = csv.split(/[\r?\n|\r|\n]+/);         

            for (var i = 0; i < csvLines.length; i++)
                if (csvLines[i].length > 0) {
                    points = csvLines[i].split(",");
                    dataPoints.push({ 
                        x: parseFloat(points[0]), 
                        y: parseFloat(points[1])        
                    });
                }
            return dataPoints;
        }

    $.get("https://canvasjs.com/services/data/datapoints.php?xstart=5&ystart=10&length=10&type=csv", function(data) {
        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                 text: "Chart from CSV",
            },
            data: [{
                 type: "line",
                 dataPoints: getDataPointsFromCSV(data)
              }]
         });

          chart.render();

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

I'm using Windows 8 and when I save it to my desktop and enter the file location D:\DT-John\csvtest1.html in my Firefox or Chrome browser it just results in a blank page.

I tested the following code from https://canvasjs.com/html5-javascript-line-chart/ just to see if it would graph with data in the html instead of pulling from a csv, and it worked perfectly (again, I ran it by entering D:\DT-John\csvtest2.html in my browser).

<!DOCTYPE HTML>
<html>
<head>  
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title:{
        text: "Simple Line Chart"
    },
    axisY:{
        includeZero: false
    },
    data: [{        
        type: "line",       
        dataPoints: [
            { y: 450 },
            { y: 414},
            { y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" },
            { y: 460 },
            { y: 450 },
            { y: 500 },
            { y: 480 },
            { y: 480 },
            { y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
            { y: 500 },
            { y: 480 },
            { y: 510 }
        ]
    }]
});
chart.render();

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

I read somewhere that it could have something to do with jQuery not working properly, so I tested the following code from https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_get in exactly the same manner I tested the files above, and it worked like it should, so I think I've ruled out jQuery as an issue.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        alert("Text: " + $("#test").text());
    });
    $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());
    });
});
</script>
</head>
<body>

<p id="test">This is some <b>bold</b> text in a paragraph.</p>

<button id="btn1">Show Text</button>
<button id="btn2">Show HTML</button>

</body>
</html>

Basically I've spent a few days now trying to get this thing to generate a graph and can't figure out what the problem is. I'm very new to coding so I'm sure I'm just overlooking something obvious. Any insight would be appreciated.

Solution

Thanks to @Vishwas R's response and messing around with it more, I found that the problem was indeed with the restricted cross-origin request. Basically it can create a graph from a csv file, but the file has to be local, not from an outside source. The code I ended up using is different from the one I originally posted in my question, but it creates a CanvasJS graph by pulling data from a csv file, which was my goal to begin with. Running it locally with Xampp, this is the code that ended up working, saved as a php file:

<?php

$file = fopen("C:/xampp/htdocs/data.csv", "r");
$keys = array("y", "label");
$dataPoints = array();
while ($row = fgetcsv($file)) {
  $dataPoints[] = array_combine($keys, $row);
}
?>

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Example Graph"
    },
    axisY: {
        title: "Population"
    },
    data: [{
        type: "line",
        dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    }]
});
chart.render();

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