Seeking assistance with rendering a chart inside a bootstrap popover. Despite various debugging attempts, the chart refuses to render. Any help or insight would be greatly appreciated. Below is my HTML code:
<div id="popover-content" style="display: none;">
{%include 'scroll_card.html'%}
</div>
Note: I am using Jinja to render the HTML containing the graph intended for display in the popover. Below is the content of the scroll_card.html file:
<div class='summary'><h5 class='header'> Chart </h5>
<div class="chart" style="height: 400px;">
<canvas id='hourly-chart' width="300" height="400">Hello</canvas></div>
</div>
And here is my JavaScript code:
document.addEventListener('DOMContentLoaded', function() {
const myPopoverTrigger = document.getElementById('popover');
let hourChart =null;
const instance = new mdb.Popover(myPopoverTrigger, {
title:"Hourly Forecast",
sanitize:false,
html:true,
content: function(){
popContent = document.querySelector('#popover-content').innerHTML;
return popContent;
}
});
myPopoverTrigger.addEventListener('show.mdb.popover', () => {
const ctxHour = document.getElementById('hourly-chart').getContext('2d');
console.log(ctxHour);
if (hourChart) {
hourChart.destroy();
}
hourChart = new Chart(ctxHour, {
type: 'line',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
responsive: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
console.log(hourChart);
});
myPopoverTrigger.addEventListener('hide.mdb.popover', () => {
if (hourChart) {
hourChart.destroy();
}
});
});
Furthermore, when I use console.log on the chart (hourChart), it returns some unexpected attributes such as x and y being undefined in the options section. Could I be overlooking something or making an error?
Thank you.
Edit:
Upon calling console.log(hourChart), my console displays the following: