I am trying to draw a bar chart with chart.js that uses multiple labels so that I can manipulate them. I have managed to do it with a line chart and tried extending what I did there with no luck. I am getting this error. what could be causing it?
"Uncaught TypeError: Object.defineProperty called on non-object".
The issue is somewhere in the data: {} because when I had data as a simple 2 index array it was working fine.
edit: when stepping through dataset = null;
var com_passed = rows[rows.length-2]["# Common Passed"];
var com_failed = rows[rows.length-2]["# Common Failed"];
var ctx = document.getElementById("common_chart");
ctx.height = 50;
var historicalChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Passed", "Failed"],
datasets: [
{
data: com_passed,
label: "Passed",
fillColor: "red"
},
{
data: com_failed,
label: "Failed",
fillColor: "green"
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
responsive: false,
maintainAspectRatio: true
}
}]
}
}
});
for those having a similar issue. I needed to make the data com_passed and com_failed as an array instead of an integer like so.
var com_passed = rows[rows.length-2]["# Common Passed"];
var com_failed = rows[rows.length-2]["# Common Failed"];
var ctx = document.getElementById("common_chart");
ctx.height = 50;
var historicalChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Passed", "Failed"],
datasets: [
{
data: [com_passed],
label: "Passed",
fillColor: "red"
},
{
data: [com_failed],
label: "Failed",
fillColor: "green"
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
responsive: false,
maintainAspectRatio: true
}
}]
}
}
});