asyncWidget with chart data not showing anything
shakhawatfci opened this issue · comments
I have chartjs chart in my widget , if i called it @widget it works fine but when i try to load it via @asyncWidget it does not work . currently i only have static data in chart
When chartjs is called your widget is not already loaded in the DOM, that's why it does not work by using @asyncWidget.
There is some solutions : initialize chartjs in the widget directly, using MutationObserver to trigger chartjs when element is loaded, using interval, ...
currently I'm doing int this way
var ctx = document.getElementById("bar_chart_average_IA_Area");
ctx.height = 110;
new Chart(document.getElementById("bar_chart_average_IA_Area"), {
type: 'bar',
data: {
labels: ["Sherpur","Dhaka","Chittagong","Feni"],
datasets: [
{
label: "W1",
backgroundColor: "#4472c4",
data: [10,20,30,40]
}, {
label: "W2",
backgroundColor: "#ed7d31",
data: [20,30,40,50]
},
{
label: "W3",
backgroundColor: "#a5a5a5",
data: [20,49,50,44]
},
{
label: "W4",
backgroundColor: "#ffc000",
data: [34,55,45,66]
}
]
},
options: {
showAllTooltips: true,
scales: {
yAxes: [{
maxBarThickness: 50,
}]
},
plugins: {
labels: false,
},
title: {
display: true,
text: 'Average IA'
}
}
});