The problem I am facing is that I have 5 different charts that load random generated data at the same time, causing the application to run slowly. The point of the application is to allow the user to select the diagram that he wants to view once, and all other diagrams should be idle (this is not so) ...
I'm starting to think that since I have included diagrams (diagram1.js, diagram2.js, etc.) in index.html, this may be the reason that the application slows down because everything loads immediately. I use jQuery only to show or hide the click-dependent diagram.
How can I make the user see only one diagram at a time and keep the rest of the inactivity (without input data) until they are selected?
This is included in index.html, inside <body>, <div id = "diagram4"></div>responsible for showing the chart.
<script src="diagram1.js"></script>
<script src="diagram2.js"></script>
<script src="diagram3.js"></script>
<script src="diagram4.js"></script>
<script src="diagram5.js"></script>
This is a 4.js diagram that contains the contents of the diagram, remember that I did not include all the code in order to save space in this document.
$(window).on("load", function() {
var chart = new CanvasJS.Chart("diagram4",
{
});
});
This is a jQuery event that handles a click. When the user clicks on chart4, chart4 appears.
$('[data-row]').on('click', function() {
var row = $(this).attr('data-row');
$('.active').removeClass('active');
$('#table' + row).addClass('active');
});
source
share