The problem seems to lie in a few places. To start my charts I am trying to bring up in the third tab won't display the JavaScript tied to the div. I believe this is because they're set to inactive in the HTML class, which then doesn't load the charts <div> to display the charts.
I'm not sure the method to go about fixing this, I have looked into DOM events and Ajax load functions. But I'm not sure if that's actually the correct answer.
The ways I have tried to fix this are by making the tab active which works. But say in the future I want graphs on all three tabs, it still only loads the active tab. Also, I have tried to put the apex charts graph JS code in my click function, which also works. But again it if you click on the tabs in the order of 1 -> 2 -> 3 you will have loaded 3 charts.
All of this is using Apex charts, Bootstrap, PHP and JS.
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#menu1">Menu 1</a></li>
<li class="nav-item"><a class="nav-link" href="#menu2">Menu 2</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<div class="row">
<div class="col-lg-6">
<h3>Income categories</h3>
<div id="chart"></div>
</div>
<div class="col-lg-6">
<h3>Expense categories</h3>
<div id="chart2"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
</body>
</html>
<!--Loads in the bar chart for analytics-->
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<?php include($_SERVER['DOCUMENT_ROOT'] . "/Management/scripts/incomegraph.php"); ?>
This is the Apex Charts
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: true
},
series: [{
data: [
400,
430,
448,
470,
540]
}],
xaxis: {
categories: [
'Management Income',
'Late Fee Income',
'Application Fee Income',
'Convience Fees',
'Laundry',],
}
}
var chart = new ApexCharts(document.querySelector("#chart"),options);
chart.render();
var options = {
chart: {
height: 350,
type: 'bar',
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: true
},
series: [{
data: [400, 430, 448, 470, 540]
}],
xaxis: {
categories: [
'Legal fees',
'Utilities',
'Cleaning and Maintenance',
'Wages and Salaries',
'Repairs',],
}
}
var chart = new ApexCharts(document.querySelector("#chart2"),options);
chart.render();
The only error message I get is as followed:
TypeError: Cannot read property 'forEach' of undefined
at i.value (apexcharts:6)
at i.value (apexcharts:6)
at apexcharts:6
at it (apexcharts:6)
at new $ (apexcharts:6)
at i.value (apexcharts:6)
at apexcharts:6
I have looked at the post for help but none have sufficient answer Bootstrap load AJAX content in Inactive Tab Reloading Content of Ajax Tab bootstrap popover: reload content with ajax
It was a bug in ApexCharts which is recently fixed and released in v3.7.1 Please update ApexCharts to 3.7.1 and hopefully, the issue will resolve itself.