CODEWITHSUNDEEP
javascript
Pruthvi Raj
Pruthvi Raj

Reputation: 81

Type Error : document.getElementById(...) is null

<html>
<head>
</head>
<body>
<h2>Example of Line Graph</h2>    
<script src="../../../Scripts/Chart.min.js"></script>
<script src="../../../Scripts/Chart.js"></script>
<script>
    var monthsData = {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
        {
            fillColor: "rgba(172,194,132,0.4)",
            strokeColor: "#ACC26D",
            pointColor: "#fff",
            pointStrokeColor: "#9DB86D",
            data: [203, 156, 99, 251, 305, 247]
        }
        ]
    };
    var months = document.getElementById("chartData").getContext("2d");
    new Chart(months).Line(monthsData);
</script>
<div>
     <canvas id="chartData" width="600" height="400"></canvas>
</div>
</body>
</html>

I have seen previous error regarding the same issue and corrected all those but mine is not resolved. I'm using chart.js library.

Upvotes: 1

Views: 1434

Answers (4)

Vikram
Vikram

Reputation: 720

Change your Code Like This

<html>
<head>
</head>
<body>
<h2>Example of Line Graph</h2>    
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

<div>
     <canvas id="chartData" width="600" height="400"></canvas>
</div>
<script>
    var monthsData = {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
        {
            fillColor: "rgba(172,194,132,0.4)",
            strokeColor: "#ACC26D",
            pointColor: "#fff",
            pointStrokeColor: "#9DB86D",
            data: [203, 156, 99, 251, 305, 247]
        }
        ]
    };
    var months = document.getElementById("chartData").getContext("2d");
    new Chart(months).Line(monthsData);
</script>

</body>
</html>

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115242

You are trying to retrieve the element before it's loading. So load the script after page load by using window.onload event handler .

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.(Taken from here)

<script>
  window.onload = function() {    
    var monthsData = {
      labels: ["January", "February", "March", "April", "May", "June"],
      datasets: [{
        fillColor: "rgba(172,194,132,0.4)",
        strokeColor: "#ACC26D",
        pointColor: "#fff",
        pointStrokeColor: "#9DB86D",
        data: [203, 156, 99, 251, 305, 247]
      }]
    };
    var months = document.getElementById("chartData").getContext("2d");
    new Chart(months).Line(monthsData);
  }
</script>

Upvotes: 0

Cristian Lupascu
Cristian Lupascu

Reputation: 40566

Place your script tag below the div that contains the canvas element.

You are getting the error because at the time the script is interpreted and executed, the canvas does not exist in the DOM.

The MDN page about script tags states that:

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

This being said, my answer presents the cause of the error and a simple workaround. Check out Satpal's answer for a more idiomatic solution.

Upvotes: 2

Satpal
Satpal

Reputation: 133433

You are getting the issue as when the statement document.getElementById("chartData") is executed the DOM is yet not loaded. So its not able to find the element.

You should use DOMContentLoaded event

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

<script>
document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");

    var monthsData = {
        labels: ["January", "February", "March", "April", "May", "June"],
        datasets: [
                {
                    fillColor: "rgba(172,194,132,0.4)",
                    strokeColor: "#ACC26D",
                    pointColor: "#fff",
                    pointStrokeColor: "#9DB86D",
                    data: [203, 156, 99, 251, 305, 247]
                }
            ]
    };
    var months = document.getElementById("chartData").getContext("2d");
    new Chart(months).Line(monthsData);
});
</script>

Upvotes: 1

Related Questions