Poor application performance
The problem I am having is that the performance of the application is very slow because I believe they refer to many charts running in the background, in other words, a lot is happening inside index.html.
How do I make only one chart run only when the user views it and hold the remainder of the idle until they are selected?
I have two HTML files and five JavaScript files.
- Index.html
- NavigationList.html
- Diagram1.js
- Diagram2.js
- Diagram3.js
- Diagram4.js
- Diagram5.js
This is index.html, here I have included 5 charts that can be viewed internally <body>
as an id.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="canvasjs-1.6.2/canvasjs.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Import diagrams-->
<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>
<script>
$(function(){
$("#selectTable").load("NavigationList.html"); // Navigation list for diagrams
});
</script>
</head>
<body>
<div id="toolbar"></div>
<div id="diagram1" class="table"></div>
<div id="diagram2" class="table"></div>
<div id="diagram3" class="table"></div>
<div id="diagram4" class="table"></div>
<div id="diagram5" class="table"></div>
<div id="NavigationList"></div>
</body>
</html>
This is NavigationList.html and has two parts. The first part is html content, which is responsible for displaying the list to the user. The second part is JQuery, which handles click events. I am suspicious and believe that maybe the problem could be inside the JQuery code as it only runs the charts separately "display: none / block" but this steedigram is still running in the background so I need to find a way to stop them running at the same time?
</div>
<ul class="list-group">
<!--Set this inside a div to individuelly choose-->
<div id='list_row1' data-row="1"><li class="list-group-item">Exhaust Temperature</li></div>
<div id='list_row2' data-row="2"><li class="list-group-item">Cylinder Pressure</li></div>
<div id='list_row3' data-row="3"><li class="list-group-item">Mass Air Flow</li></div>
<div id='list_row4' data-row="4"><li class="list-group-item">Flywheel</li></div>
<div id='list_row5' data-row="5"><li class="list-group-item">Lambda</li></div>
<div id='list_row6' data-row="6"><li class="list-group-item">Knock</li></div>
<!--<div id='list_row7' data-row="7"><li class="list-group-item">Camshaft position</li></div>-->
<div id='list_row8' data-row="8"><li class="list-group-item">Fluid Temperature</li></div>
<div id='list_row9' data-row="9"><li class="list-group-item">Fluid Pressure</li></div>
<div id='list_row10' data-row="10"><li class="list-group-item">Throttle Position</li></div>
<div id='list_row11' data-row="11"><li class="list-group-item">Manifold Absolute Pressure</li></div>
<div id='list_row12' data-row="12"><li class="list-group-item">Flex Fuel</li></div>
</ul>
</div>
<script>
$(function(){
$('[data-row]').on('click', function() {
var row = $(this).attr('data-row');
$('.active').removeClass('active');
$('#table' + row).addClass('active');
});
});
</script>
This is diagram1.js from 5 other diagrams. The file is included in index.html. The code here is simply responsible for displaying a chart with some randomly generated data. But if 5 charts are included in index.html it slows down performance.
$(window).on("load", function() {
var dps = [];
var chart = new CanvasJS.Chart("diagram1",
{
data: [
{
type: "spline",
dataPoints: dps
}]
});
var xVal = 0;
var yVal = 100;
var updateInterval = 1;
var dataLength = 50;
var updateChart = function (count) {
count = count || 1;
// count is number of times loop runs to generate random dataPoints.
for (var j = 0; j < count; j++) {
yVal = yVal + Math.round(5 + Math.random() *(-5-5));
dps.push({
x: xVal,
y: yVal
});
xVal++;
};
if (dps.length > dataLength )
{
dps.shift();
}
chart.render();
};
// generates first set of dataPoints
updateChart(dataLength);
// update chart after specified time.
setInterval(function(){updateChart()}, updateInterval);
});
source to share
You must remember that time in JavaScript runs in milliseconds, not seconds.
When you call var updateInterval = 1;
, you say that it runs every 1 millisecond.
This means that every 1 second you are asking it to run 1000 times. This is probably a bottleneck.
If this is not your intention, you can try a higher value. 1 second = 1000 milliseconds.
Try updating your code to var updateInterval = 1000;
.
Below is an additional resource on JavaScript sync events: http://www.w3schools.com/js/js_timing.asp
source to share