Location: PHPKode > projects > WillCool > WillCool_v2.0/frame_realtime_2.html
<!--
####################################################
#                                                  #
# AUTHOR: William Massey                           #
# DATE: 15-feb-2007                                #
#                                                  #
####################################################

Copyright 2007 William Massey

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!-- COMMENTS ABOUT GRAPHS 

Change the graph height in 3 places:
	height: 35px;
	* 350);
	bar.style.height = (35 - random_number) + 'px';

Change the threshold here:
	if (random_number > 100) {

to add a new graph, we need a new XMLHttpRequest object, which means a new AddBar function.

To change refresh:
	120000); //refresh rate for graph (ms)
	then change wording "Realtime CPU Usage Over Last xx Minutes ". 
	Pixel width=a
	canvas width=b
	refresh rate=d (s)
	1 bar=d seconds = refresh rate = duration of history in s /90=5400(90mins) or 86400(1day)/90
	1 bar=960seconds= refresh rate = 480000
	24 hrs refresh rate =960000
	12 hrs refresh rate =480000
	90 min refresh rate =60000
	1  hrs refresh rate =40000
	90bars=d*90 seconds
	        	
-->

<html>

<head>
	<link rel="stylesheet" type="text/css" href="willcool.css" />

	<script src="ajax.js" type="text/javascript"></script>

	<!-- Start of graphcode - repeat this section for each graph -->
	<style type="text/css">
	#canvas1 {
	height: 35px;
	text-align: right;
	width: 120px;
	overflow: hidden;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
	}
	.bar1 {
	width: 1px;
	float: right;
	}
	</style>
	<script type="text/javascript">  
	  function AddBar1() {
	    var xmlreq1=create_request();
	    var canvas1 = document.getElementById('canvas1');
	    xmlreq1.onreadystatechange = function(){
	      if (xmlreq1.readyState == 4){
	        if (xmlreq1.status != 9999){
	            var bar1 = document.createElement('DIV');
		    bar1.className = 'bar1';
	            var random_number = parseInt(xmlreq1.responseText);
	            if (random_number > 100) {
		    bar1.style.background = '#FF0000';
		    }
		    else {
		    bar1.style.background = '#006699';
		    }
		    if (random_number != 100) {
		    random_number/=1000;
		    random_number=0.1-random_number;
		    random_number*=350;
		    }
		    else {
		    random_number=0.1; 
		    }
		    if (!random_number) { random_number=28; } // prob no longer neccessary but leave for safety		    
		    bar1.style.marginTop = random_number + 'px';
		    bar1.style.height = (35 - random_number) + 'px';
		    canvas1.insertBefore(bar1, canvas1.childNodes.item(0));  
		    xmlreq1 = null;
		    canvas1 = null;
		    bar1 = null;
		    random_number = null;
		    setTimeout("AddBar1()", 120000); //refresh rate for graph (ms)
	        }
	      }
	    }
	    xmlreq1.open("POST", "frame_realtime_get_data_2.php", true);
	    xmlreq1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    xmlreq1.send("data_required=graph_counter1");
	  }
	</script>
	<!-- end of graphcode -->
	
	
	<!-- Start of graphcode - repeat this section for each graph -->
	<style type="text/css">
	#canvas2 {
	height: 35px;
	text-align: right;
	width: 120px;
	overflow: hidden;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
	}
	.bar2 {
	width: 1px;
	float: right;
	}
	</style>
	<script type="text/javascript">  
	  function AddBar2() {
	    var xmlreq2=create_request();
	    var canvas2 = document.getElementById('canvas2');
	    xmlreq2.onreadystatechange = function(){
	      if (xmlreq2.readyState == 4){
	        if (xmlreq2.status != 9999){
	            var bar2 = document.createElement('DIV');
		    bar2.className = 'bar2';
	            var random_number = parseInt(xmlreq2.responseText);
	            if (random_number > 100) {
		    bar2.style.background = '#FF0000';
		    }
		    else {
		    bar2.style.background = '#006699';
		    }
		    if (random_number != 100) {
		    random_number/=1000;
		    random_number=0.1-random_number;
		    random_number*=350;
		    }
		    else {
		    random_number=0.1; 
		    }
		    if (!random_number) { random_number=28; } // prob no longer neccessary but leave for safety			    
		    bar2.style.marginTop = random_number + 'px';
		    bar2.style.height = (35 - random_number) + 'px';
		    canvas2.insertBefore(bar2, canvas2.childNodes.item(0));    
		    xmlreq2 = null;
		    canvas2 = null;
		    bar2 = null;
		    random_number = null;
		    setTimeout("AddBar2()", 120000); //refresh rate for graph (ms)
	        }
	      }
	    }
	    xmlreq2.open("POST", "frame_realtime_get_data_2.php", true);
	    xmlreq2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    xmlreq2.send("data_required=graph_counter2");
	  }
	</script>
	<!-- end of graphcode -->
	
	
	<!-- Start of graphcode - repeat this section for each graph -->
	<style type="text/css">
	#canvas3 {
	height: 35px;
	text-align: right;
	width: 120px;
	overflow: hidden;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
	}
	.bar3 {
	width: 1px;
	float: right;
	}
	</style>
	<script type="text/javascript"> 
	  function AddBar3() {
	    var xmlReq3=create_request();
	    var canvas3 = document.getElementById('canvas3');
	    xmlReq3.onreadystatechange = function(){
	      if (xmlReq3.readyState == 4){
	        if (xmlReq3.status != 9999){
	            var bar3 = document.createElement('DIV');
		    bar3.className = 'bar3';
	            var random_number = parseInt(xmlReq3.responseText);
	            if (random_number > 100) {
		    bar3.style.background = '#FF0000';
		    }
		    else {
		    bar3.style.background = '#006699';
		    }
		    if (random_number != 100) {
		    random_number/=1000;
		    random_number=0.1-random_number;
		    random_number*=350;
		    }
		    else {
		    random_number=0.1; 
		    }
		    if (!random_number) { random_number=28; } // prob no longer neccessary but leave for safety			    
		    bar3.style.marginTop = random_number + 'px';
		    bar3.style.height = (35 - random_number) + 'px';
		    canvas3.insertBefore(bar3, canvas3.childNodes.item(0));    
		    xmlreq3 = null;
		    canvas3 = null;
		    bar3 = null;
		    random_number = null;
		    setTimeout("AddBar3()", 120000); //refresh rate for graph (ms)
	        }
	      }
	    }
	    xmlReq3.open("POST", "frame_realtime_get_data_2.php", true);
	    xmlReq3.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    xmlReq3.send("data_required=graph_counter3");
	  }
	</script>
	<!-- end of graphcode -->
	
	
	<!-- Start of graphcode - repeat this section for each graph -->
	<style type="text/css">
	#canvas4 {
	height: 35px;
	text-align: right;
	width: 120px;
	overflow: hidden;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
	}
	.bar4 {
	width: 1px;
	float: right;
	}
	</style>
	<script type="text/javascript"> 
	  function AddBar4() {
	    var xmlReq4=create_request();
	    var canvas4 = document.getElementById('canvas4');
	    xmlReq4.onreadystatechange = function(){
	      if (xmlReq4.readyState == 4){
	        if (xmlReq4.status != 9999){
	            var bar4 = document.createElement('DIV');
		    bar4.className = 'bar4';
	            var random_number = parseInt(xmlReq4.responseText);
	            if (random_number > 100) {
		    bar4.style.background = '#FF0000';
		    }
		    else {
		    bar4.style.background = '#006699';
		    }
		    if (random_number != 100) {
		    random_number/=1000;
		    random_number=0.1-random_number;
		    random_number*=350;
		    }
		    else {
		    random_number=0.1; 
		    }
		    if (!random_number) { random_number=28; } // prob no longer neccessary but leave for safety			    
		    bar4.style.marginTop = random_number + 'px';
		    bar4.style.height = (35 - random_number) + 'px';
		    canvas4.insertBefore(bar4, canvas4.childNodes.item(0));    
		    xmlreq4 = null;
		    canvas4 = null;
		    bar4 = null;
		    random_number = null;
		    setTimeout("AddBar4()", 120000); //refresh rate for graph (ms)
	        }
	      }
	    }
	    xmlReq4.open("POST", "frame_realtime_get_data_2.php", true);
	    xmlReq4.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    xmlReq4.send("data_required=graph_counter4");
	  }
	</script>
	<!-- end of graphcode -->
	
	
	<!-- Start of graphcode - repeat this section for each graph -->
	<style type="text/css">
	#canvas5 {
	height: 35px;
	text-align: right;
	width: 120px;
	overflow: hidden;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
	}
	.bar5 {
	width: 1px;
	float: right;
	}
	</style>
	<script type="text/javascript"> 
	  function AddBar5() {
	    var xmlReq5=create_request();
	    var canvas5 = document.getElementById('canvas5');
	    xmlReq5.onreadystatechange = function(){
	      if (xmlReq5.readyState == 4){
	        if (xmlReq5.status != 9999){
	            var bar5 = document.createElement('DIV');
		    bar5.className = 'bar5';
	            var random_number = parseInt(xmlReq5.responseText);
	            if (random_number > 100) {
		    bar5.style.background = '#FF0000';
		    }
		    else {
		    bar5.style.background = '#006699';
		    }
		    if (random_number != 100) {
		    random_number/=1000;
		    random_number=0.1-random_number;
		    random_number*=350;
		    }
		    else {
		    random_number=0.1; 
		    }
		    if (!random_number) { random_number=28; } // prob no longer neccessary but leave for safety			    
		    bar5.style.marginTop = random_number + 'px';
		    bar5.style.height = (35 - random_number) + 'px';
		    canvas5.insertBefore(bar5, canvas5.childNodes.item(0));    
		    xmlreq5 = null;
		    canvas5 = null;
		    bar5 = null;
		    random_number = null;
		    setTimeout("AddBar5()", 120000); //refresh rate for graph (ms)
	        }
	      }
	    }
	    xmlReq5.open("POST", "frame_realtime_get_data_2.php", true);
	    xmlReq5.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    xmlReq5.send("data_required=graph_counter5");
	  }
	</script>
	<!-- end of graphcode -->
	
	
	<!-- Start of graphcode - repeat this section for each graph -->
	<style type="text/css">
	#canvas6 {
	height: 35px;
	text-align: right;
	width: 120px;
	overflow: hidden;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
	}
	.bar6 {
	width: 1px;
	float: right;
	}
	</style>
	<script type="text/javascript"> 
	  function AddBar6() {
	    var xmlReq6=create_request();
	    var canvas6 = document.getElementById('canvas6');
	    xmlReq6.onreadystatechange = function(){
	      if (xmlReq6.readyState == 4){
	        if (xmlReq6.status != 9999){
	            var bar6 = document.createElement('DIV');
		    bar6.className = 'bar6';
	            var random_number = parseInt(xmlReq6.responseText);
	            if (random_number > 100) {
		    bar6.style.background = '#FF0000';
		    }
		    else {
		    bar6.style.background = '#006699';
		    }
		    if (random_number != 100) {
		    random_number/=1000;
		    random_number=0.1-random_number;
		    random_number*=350;
		    }
		    else {
		    random_number=0.1; 
		    }
		    if (!random_number) { random_number=28; } // prob no longer neccessary but leave for safety			    
		    bar6.style.marginTop = random_number + 'px';
		    bar6.style.height = (35 - random_number) + 'px';
		    canvas6.insertBefore(bar6, canvas6.childNodes.item(0));    
		    xmlreq6 = null;
		    canvas6 = null;
		    bar6 = null;
		    random_number = null;
		    setTimeout("AddBar6()", 120000); //refresh rate for graph (ms)
	        }
	      }
	    }
	    xmlReq6.open("POST", "frame_realtime_get_data_2.php", true);
	    xmlReq6.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    xmlReq6.send("data_required=graph_counter6");
	  }
	</script>
	<!-- end of graphcode -->
	
	
	<!-- Start of graphcode - repeat this section for each graph -->
	<style type="text/css">
	#canvas7 {
	height: 35px;
	text-align: right;
	width: 120px;
	overflow: hidden;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
	}
	.bar7 {
	width: 1px;
	float: right;
	}
	</style>
	<script type="text/javascript"> 
	  function AddBar7() {
	    var xmlReq7=create_request();
	    var canvas7 = document.getElementById('canvas7');
	    xmlReq7.onreadystatechange = function(){
	      if (xmlReq7.readyState == 4){
	        if (xmlReq7.status != 9999){
	            var bar7 = document.createElement('DIV');
		    bar7.className = 'bar7';
	            var random_number = parseInt(xmlReq7.responseText);
	            if (random_number > 100) {
		    bar7.style.background = '#FF0000';
		    }
		    else {
		    bar7.style.background = '#006699';
		    }
		    if (random_number != 100) {
		    random_number/=1000;
		    random_number=0.1-random_number;
		    random_number*=350;
		    }
		    else {
		    random_number=0.1; 
		    }
		    if (!random_number) { random_number=28; } // prob no longer neccessary but leave for safety			    
		    bar7.style.marginTop = random_number + 'px';
		    bar7.style.height = (35 - random_number) + 'px';
		    canvas7.insertBefore(bar7, canvas7.childNodes.item(0));    
		    xmlreq7 = null;
		    canvas7 = null;
		    bar7 = null;
		    random_number = null;
		    setTimeout("AddBar7()", 120000); //refresh rate for graph (ms)
	        }
	      }
	    }
	    xmlReq7.open("POST", "frame_realtime_get_data_2.php", true);
	    xmlReq7.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    xmlReq7.send("data_required=graph_counter7");
	  }
	</script>
	<!-- end of graphcode -->
	
	
	<!-- Start of graphcode - repeat this section for each graph -->
	<style type="text/css">
	#canvas8 {
	height: 35px;
	text-align: right;
	width: 120px;
	overflow: hidden;
	border-right: #999999 1px solid;
	border-bottom: #999999 1px solid;
	}
	.bar8 {
	width: 1px;
	float: right;
	}
	</style>
	<script type="text/javascript"> 
	  function AddBar8() {
	    var xmlReq8=create_request();
	    var canvas8 = document.getElementById('canvas8');
	    xmlReq8.onreadystatechange = function(){
	      if (xmlReq8.readyState == 4){
	        if (xmlReq8.status != 9999){
	            var bar8 = document.createElement('DIV');
		    bar8.className = 'bar8';
	            var random_number = parseInt(xmlReq8.responseText);
	            if (random_number > 100) {
		    bar8.style.background = '#FF0000';
		    }
		    else {
		    bar8.style.background = '#006699';
		    }
		    if (random_number != 100) {
		    random_number/=1000;
		    random_number=0.1-random_number;
		    random_number*=350;
		    }
		    else {
		    random_number=0.1; 
		    }
		    if (!random_number) { random_number=28; } // prob no longer neccessary but leave for safety			    
		    bar8.style.marginTop = random_number + 'px';
		    bar8.style.height = (35 - random_number) + 'px';
		    canvas8.insertBefore(bar8, canvas8.childNodes.item(0));    
		    xmlreq8 = null;
		    canvas8 = null;
		    bar8 = null;
		    random_number = null;
		    setTimeout("AddBar8()", 120000); //refresh rate for graph (ms)
	        }
	      }
	    }
	    xmlReq8.open("POST", "frame_realtime_get_data_2.php", true);
	    xmlReq8.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	    xmlReq8.send("data_required=graph_counter8");
	  }
	</script>
	<!-- end of graphcode -->

</head>

<body onload="AddBar1();AddBar2();AddBar3();AddBar4();AddBar5();AddBar6();AddBar7();AddBar8();">

	<div align=center>

	<Table height=90% width=87% style="border-width:0px;">
	
		<tr>
			<td valign=middle colspan=4>
			<p class="first"><u>Realtime Database Latency Over Last 4 Hours</u></p>
			</td>
		</tr>
		
		<tr>	
			<td valign=middle>
			AA Instance 1
			<br>
			<div id="canvas1">
		        <div></div>
		        </div>
		        </td>
			<td valign=middle>
			AA Instance 2
			<br>	
			<div id="canvas2">
		        <div></div>
		        </div>
		        </td>
			<td valign=middle>
			CC Instance 1
			<br>	
			<div id="canvas3">
		        <div></div>
		        </div>
		        </td>
			<td valign=middle>
			CC Instance 2
			<br>	
			<div id="canvas4">
		        <div></div>
		        </div>
		        </td>        
		</tr>
		
		<tr>	
			<td valign=middle>
			BB Instance 1
			<br>
			<div id="canvas5">
		        <div></div>
		        </div>
		        </td>
			<td valign=middle>
			BB Instance 2
			<br>	
			<div id="canvas6">
		        <div></div>
		        </div>
		        </td>
			<td valign=middle>
			DD Instance 1
			<br>	
			<div id="canvas7">
		        <div></div>
		        </div>
		        </td>
			<td valign=middle>
			DD Instance 2
			<br>	
			<div id="canvas8">
		        <div></div>
		        </div>
		        </td>        
		</tr>
	
	</table>
	
	</div>
	
</body>
</html>
Return current item: WillCool