Menu
Has anyone experienced this?
Bootstrap's Javascript (For modals, accordion, and other animations) has conflict for my Chart.js.
Here's the cdn link, I used the minified version. (Chart.min.js)
If this helps, I'll show my script for the chart:
<script src="{{ asset('js/Chart.min.js') }}"></script>
<script>
let myChart = document.getElementById('myChart').getContext('2d');
let massPopChart = new Chart(myChart, {
responsive: true,
type:'line',
data:{
labels:['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
datasets:[{
label:'Sales',
data:[
500,
304,
601,
670,
912,
612,
500
],
backgroundColor: 'rgba(129, 207, 238, 1)',
borderWidth: 1,
borderColor: '#000',
hoverBorderWidth: 3,
hoverBorderColor: '#000'
}]
},
options:{
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
}
}]
},
title:{
display: true,
text: 'Weekly Sales',
fontSize: 25
},
legend:{
position:'bottom',
display:false,
},
layout:{
padding: 50,
}
}
});
</script>
It's a line chart that has a default value (for testing).
The chart disappears after a split second, and because of this. I knew that it was because of the Bootstrap's javascript.
Whenever I take off, or comment out the script tag for the Bootstrap's javascript, the chart shows with no problem at all. But my modal and other animations doesn't work now.
I somehow want both of them to work, because I need them both.
708
This may be the most frustrating (bug/feature/problem) I have ever come accross and got me stuck for a few days, but because my boss doesn't take no for an answer and I hate giving up, I finally managed to solve it. The answer thought me something about html and javascript I never knew:
In the <head></head> of your html file you need to change the way bootstrap call's it's app.js from this:
<script src="{{ asset('js/app.js') }}" defer></script>
to this:
<script src="{{ asset('js/app.js') }}"></script>
Note the missing defer tag.
You may be wondering, what does the defer tag do? And to answer that I give you this small snippet:
<html>
<body>
<script src="https://www.w3schools.com/tags/demo_defer.js" defer></script>
<p id="p1">
Hello World!
</p>
</body>
</html>It simply stops the browser from loading/running the script until the site has been completely parsed. In the above example the script we call contains the following code:
alert(document.getElementById("p1").firstChild.nodeValue);
Basically telling your browser to send an alert with the contents of whatever is inside the p tags. Without the defer tag, the script would fail because it would be run before the p tags get parsed by the browser, and javascript can only work with what the browser already parsed.
As far as I found, removing the defer tag doesn't break anything in bootstrap, so I don't know why it even has a defer tag.
I'm also not quite sure why this would be a problem for chart.js, If anyone knows I would love to hear it.
127
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
