Chartjs.org Chart only displaying in one page

Question

My charts works well on the same page but when I put on different pages, only the first one works fine.

ex: Page1.html

<div class="wrapper">
  <canvas id="pieChart" width="200px" height="200px"></canvas> 
</div>

Page2.html

 <div class="wrapper">
  <canvas id="lineChart" width="200px" height="200px"></canvas> 
 </div>

JS

    //page1.html
    //piechart
    var pieVar = {
        type: 'pie',
        data: {
        labels: ["Yes", "No"],
        datasets: [
            {
                data: [60, 40],
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB"
                ]
            }
        ]
    },
        options: {
            scales: {
                xAxes: [{
                    display: true
                }]
            }
        }
    }

    //page2.html
    //line chart
    var lineVar = {
        type: 'line',
        data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fill: true,
                lineTension: 0.2,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 10,
                pointHoverBackgroundColor: "rgba(255,0,0,1)",
                pointHoverBorderColor: "rgba(255,0,0,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    },
        options: {
            scales: {
                xAxes: [{
                    display: true
                }]
            }
        }
    }

    window.onload = function(){
        //piechart
        var pieCtx =  document.getElementById("pieChart");
        var myPieChart = new Chart(pieCtx, pieVar);
        //linechart
        var lineCtx =  document.getElementById("lineChart");
        var myLineChart = new Chart(lineCtx, lineVar);
    };

In this codepen works fine because it's the same page.. CODEPEN

Do both of your pages execute the same javascript? How are you loading/executing your javascript on each page? — jordanwillis
– jordanwillis, Commented Mar 8, 2017 at 20:11
yes, it's loading well. I got this error in the console btw.. Uncaught TypeError: Cannot read property 'length' of null at Object.acquireContext (Chart.min.js:14) at new t.Controller (Chart.min.js:11) at new t (Chart.min.js:12) at window.onload (theme.min.js?ver=0.5.6:3) — Nemesis Teufel
– Nemesis Teufel, Commented Mar 9, 2017 at 20:34

jordanwillis · Accepted Answer · 2017-03-10 03:45:07Z

It sounds like you're loading the same JavaScript file (which contains the configurations for both of your charts) in both of your pages. The problem is since you're using a single JavaScript file with two chart definitions, the chart you try to create that doesn't exist in the html is throwing an error because you are passing in an empty context.

window.onload = function(){
  //piechart (this will be null on page2.html)
  var pieCtx = document.getElementById("pieChart"); 

  // You are passing in a null pieCtx on page2.html because there is no element with an id = "pieChart"
  var myPieChart = new Chart(pieCtx, pieVar); 

  //linechart (this will be null on page1.html)
  var lineCtx = document.getElementById("lineChart"); 

  // You are passing in a null lineCtx on page1.html because there is no element with an id = "lineChart"
  var myLineChart = new Chart(lineCtx, lineVar); 
};

You should either split your JavaScript file into two files so that the first page only includes the definition for the first chart and the second page only includes the definition for the second chart. Or, add some conditions to prevent trying to create the empty chart (like this).

window.onload = function(){
  //piechart (this will be null on page2.html)
  var pieCtx = document.getElementById("pieChart"); 

  if (pieChart) {
    var myPieChart = new Chart(pieCtx, pieVar); 
  }

  //linechart (this will be null on page1.html)
  var lineCtx = document.getElementById("lineChart"); 

  if (lineChart) {
    var myLineChart = new Chart(lineCtx, lineVar); 
  }
};

Collectives™ on Stack Overflow

Chartjs.org Chart only displaying in one page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related