[Chartjs]-Chartjs Bar chart shows undefined values

by

0👍

✅

You have a simple typo here:

b_type.push("BT " + data[i].BType);

data[i].BType should be data[i].Btype (note the lowercase t in Btype).

Here’s a working example (AJAX code removed):

let data = [{
  "Btype": 1,
  "amount": 3
}, {
  "Btype": 2,
  "amount": 5
}, {
  "Btype": 3,
  "amount": 7
}];

var b_type = [];
var number = [];

for (var i in data) {
  // b_type.push("BT " + data[i].BType); // <-- typo: JSON has a lowercase "t"
  b_type.push("BT " + data[i].Btype); // <-- fixed
  number.push(data[i].amount);
}

var chart = {
  labels: b_type,
  datasets: [{
    label: b_type,
    backgroundColor: 'rgba(200,200,200,0.75)',
    borderColor: 'rgba(200,200,200,0.75)',
    hoverBackgroundColor: 'rgba(200,200,200,1)',
    hoverBorderColor: 'rgba(200,200,200,1)',
    data: number
  }]
};

var ctx = $("#myChart");

var barGraph = new Chart(ctx, {
  type: 'bar',
  data: chart
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment