A4MCAR - Utilization graph of web interface is now not flickering due to calling functions recursively using jquery

Signed-off-by: Mustafa Ozcelikors <mozcelikors@gmail.com>
diff --git a/a4mcar/web_interface/utilizationGraph.php b/a4mcar/web_interface/utilizationGraph.php
index 97674be..80295aa 100644
--- a/a4mcar/web_interface/utilizationGraph.php
+++ b/a4mcar/web_interface/utilizationGraph.php
@@ -13,7 +13,6 @@
 -->
 <html>
 <head>
-<meta http-equiv="refresh" content="3" >
 <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="jqplot_dist/excanvas.js"></script><![endif]-->
 <script language="javascript" type="text/javascript" src="jqplot_dist/jquery.min.js"></script>
 <script language="javascript" type="text/javascript" src="jqplot_dist/jquery.jqplot.min.js"></script>
@@ -38,75 +37,89 @@
 -->
 </style>
 <script type="text/javascript">
+	//XMOS Utilization global variables
 	var xmos_tile0; 
 	var xmos_tile1; 
 	var avg_tile0;
 	var avg_tile1;
-
+	
+	//Raspberry Pi Utilization global variables
+	var averageCore1 ;
+	var averageCore2 ;
+	var averageCore3 ;
+	var averageCore4 ;
+	var averageSensorReading ;
+	
 	$(document).ready(function(){
-		$.ajax({url: "core_usage_xmos.inc",
-				dataType: "text",
-				async: false,
-				success: function (data) {
-					var myString2 = data;
-					var myArray2 = myString2.split(',');
-					xmos_tile0 = [parseInt(myArray2[0],10),parseInt(myArray2[1],10),parseInt(myArray2[2],10),parseInt(myArray2[3],10),parseInt(myArray2[4],10),parseInt(myArray2[5],10),parseInt(myArray2[6],10),parseInt(myArray2[7],10)];
-					xmos_tile1 = [parseInt(myArray2[8],10),parseInt(myArray2[9],10),parseInt(myArray2[10],10),parseInt(myArray2[11],10),parseInt(myArray2[12],10),parseInt(myArray2[13],10),parseInt(myArray2[14],10),parseInt(myArray2[15],10)];
-					var avg_tilex0 = Math.round((parseInt(myArray2[0],10)+parseInt(myArray2[1],10)+parseInt(myArray2[2],10)+parseInt(myArray2[3],10)+parseInt(myArray2[4],10)+parseInt(myArray2[5],10)+parseInt(myArray2[6],10)+parseInt(myArray2[7],10))/8);
-					var avg_tilex1 = Math.round((parseInt(myArray2[8],10)+parseInt(myArray2[9],10)+parseInt(myArray2[10],10)+parseInt(myArray2[11],10)+parseInt(myArray2[12],10)+parseInt(myArray2[13],10)+parseInt(myArray2[14],10)+parseInt(myArray2[15],10))/8);
-					if (typeof avg_tilex0 !='undefined' && typeof avg_tilex1 != 'undefined' && avg_tilex0>=0 && avg_tilex0<=100 && avg_tilex1>=0 && avg_tilex1<=100){
-						avg_tile0 = avg_tilex0;
-						avg_tile1 = avg_tilex1;
-					}
-					else
-					{
-						avg_tile0 = 0;
-						avg_tile1 = 0;
-					}
+		function loadRPIUtilizationDataFile()
+		{
+			jQuery.get('core_usage_rpi.inc', function(data) {
+				var myString = data;
+				var myArray = myString.split(',');
+				averageCore1 = (Math.round(myArray[0])+Math.round(myArray[5])+Math.round(myArray[10])+Math.round(myArray[15]))/4;
+				averageCore2 = (Math.round(myArray[1])+Math.round(myArray[6])+Math.round(myArray[11])+Math.round(myArray[16]))/4;
+				averageCore3 = (Math.round(myArray[2])+Math.round(myArray[7])+Math.round(myArray[12])+Math.round(myArray[17]))/4;
+				averageCore4 = (Math.round(myArray[3])+Math.round(myArray[8])+Math.round(myArray[13])+Math.round(myArray[18]))/4;
+				averageSensorReading = Math.round((averageCore1+averageCore2+averageCore3+averageCore4)/4);
+				setTimeout(loadRPIUtilizationDataFile,1000);
+			});
+		}
+		function loadXMOSUtilizationDataFile()
+		{
+			jQuery.get('core_usage_xmos.inc', function(data) {
+				var myString2 = data;
+				var myArray2 = myString2.split(',');
+				xmos_tile0 = [parseInt(myArray2[0],10),parseInt(myArray2[1],10),parseInt(myArray2[2],10),parseInt(myArray2[3],10),parseInt(myArray2[4],10),parseInt(myArray2[5],10),parseInt(myArray2[6],10),parseInt(myArray2[7],10)];
+				xmos_tile1 = [parseInt(myArray2[8],10),parseInt(myArray2[9],10),parseInt(myArray2[10],10),parseInt(myArray2[11],10),parseInt(myArray2[12],10),parseInt(myArray2[13],10),parseInt(myArray2[14],10),parseInt(myArray2[15],10)];
+				var avg_tilex0 = Math.round((parseInt(myArray2[0],10)+parseInt(myArray2[1],10)+parseInt(myArray2[2],10)+parseInt(myArray2[3],10)+parseInt(myArray2[4],10)+parseInt(myArray2[5],10)+parseInt(myArray2[6],10)+parseInt(myArray2[7],10))/8);
+				var avg_tilex1 = Math.round((parseInt(myArray2[8],10)+parseInt(myArray2[9],10)+parseInt(myArray2[10],10)+parseInt(myArray2[11],10)+parseInt(myArray2[12],10)+parseInt(myArray2[13],10)+parseInt(myArray2[14],10)+parseInt(myArray2[15],10))/8);
+				if (typeof avg_tilex0 !='undefined' && typeof avg_tilex1 != 'undefined' && avg_tilex0>=0 && avg_tilex0<=100 && avg_tilex1>=0 && avg_tilex1<=100){
+					avg_tile0 = avg_tilex0;
+					avg_tile1 = avg_tilex1;
 				}
-		});
-
-		$.ajax({
-				url : "core_usage_rpi.inc",
-				dataType: "text",
-				async: false,
-				success : function (data) {
-					var myString = data;
-					var myArray = myString.split(',');
-					var averageCore1 = (Math.round(myArray[0])+Math.round(myArray[5])+Math.round(myArray[10])+Math.round(myArray[15]))/4;
-					var averageCore2 = (Math.round(myArray[1])+Math.round(myArray[6])+Math.round(myArray[11])+Math.round(myArray[16]))/4;
-					var averageCore3 = (Math.round(myArray[2])+Math.round(myArray[7])+Math.round(myArray[12])+Math.round(myArray[17]))/4;
-					var averageCore4 = (Math.round(myArray[3])+Math.round(myArray[8])+Math.round(myArray[13])+Math.round(myArray[18]))/4;
-					averageSensorReading = Math.round((averageCore1+averageCore2+averageCore3+averageCore4)/4);
- 					
-					$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (xCORE Tile1)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+avg_tile1 +"&nbsp;%</span>");
-					$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (xCORE Tile0)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+avg_tile0+"&nbsp;%</span>");
-					$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (RaspberryPi)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+averageSensorReading+"&nbsp;%</span>");
+				else
+				{
+					avg_tile0 = 0;
+					avg_tile1 = 0;
+				}
+				setTimeout(loadXMOSUtilizationDataFile,1000);
+			});
+		}
+		function drawGraph()
+		{
+			$('#distSensorReading').html("");
+			$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (xCORE Tile1)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+avg_tile1 +"&nbsp;%</span>");
+			$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (xCORE Tile0)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+avg_tile0+"&nbsp;%</span>");
+			$('#distSensorReading').prepend("<br /><br /><span style=\"font-size:20px; color:#CCC;\">Avg. Util (RaspberryPi)</span><br /><span style=\" font-size:40px; color:#00CCFF;\">"+averageSensorReading+"&nbsp;%</span>");
 				        
-					$.jqplot.config.enablePlugins = true;
-					var raspberry = [averageCore1, averageCore2, averageCore3, averageCore4, 0, 0, 0, 0];
-					var ticks = ['Core0', 'Core1', 'Core2', 'Core3', 'Core4', 'Core5', 'Core6', 'Core7'];
-					var labels = ['Raspberry Pi', 'xCORE Tile 0', 'xCORE Tile 1'];
-					plot1 = $.jqplot('chartdiv', [raspberry, xmos_tile0 ,xmos_tile1], {
-					// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
-					//animate: !$.jqplot.use_excanvas,
-					seriesDefaults:{
-						renderer:$.jqplot.BarRenderer,
-						pointLabels: { show: true }
-					},
-					legend: {show:true, labels:labels},
-					axes: {
-						xaxis: {
-							renderer: $.jqplot.CategoryAxisRenderer,
-							ticks: ticks
-						}
-					},
-					title : 'System Core Utilization',
-					highlighter: { show: false },
-					series:[{color:'#0099CC'}, {color:'lightgreen'}, {color:'orange'}]
-				});
-			}
-		});
+			$.jqplot.config.enablePlugins = true;
+			var raspberry = [averageCore1, averageCore2, averageCore3, averageCore4, 0, 0, 0, 0];
+			var ticks = ['Core0', 'Core1', 'Core2', 'Core3', 'Core4', 'Core5', 'Core6', 'Core7'];
+			var labels = ['Raspberry Pi', 'xCORE Tile 0', 'xCORE Tile 1'];
+			plot1 = $.jqplot('chartdiv', [raspberry, xmos_tile0 ,xmos_tile1], {
+				// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
+				//animate: !$.jqplot.use_excanvas,
+				seriesDefaults:{
+					renderer:$.jqplot.BarRenderer,
+					pointLabels: { show: true }
+				},
+				legend: {show:true, labels:labels},
+				axes: {
+					xaxis: {
+						renderer: $.jqplot.CategoryAxisRenderer,
+						ticks: ticks
+					}
+				},
+				title : 'System Core Utilization',
+				highlighter: { show: false },
+				series:[{color:'#0099CC'}, {color:'lightgreen'}, {color:'orange'}]
+			});
+			plot1.redraw();
+			setTimeout(drawGraph,1000);
+		}
+		setTimeout(loadRPIUtilizationDataFile, 10);
+		setTimeout(loadXMOSUtilizationDataFile, 10);
+		setTimeout(drawGraph, 10);
 	});
 </script>
 </head>