Chart Js Cannot read property 'length' of undefined
For other users who have this problem, make sure your container canvas element exists, when called upon.
The problem is that when your code executes, the canvas has not been created yet. You should wrap your code inside a function and assign that function to window.onload event. You can see the sample code below.
window.onload = function() {
var ctx = document.getElementById("myChart");
var lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [{
label: "2015",
data: [10, 8, 6, 5, 12, 8, 16, 17, 6, 7, 6, 10]
}]
}
})
}<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>Found the answer,
The Ajax results has to be parsed first.
resulting fix
var barChartData = JSON.parse(d);
running the following worked for me:
window.onload = function () {
}