/////////////////////////////////////////////////////////////////////////////////////////
//////////////////// Update Graph Function for Cobalt /////////////////////////////////////
//////////////////// Copyright (c) 2009-2010 Tropper Technologies, Inc. /////////////////
//////////////////// www.troppertech.com ////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////



//---------------------------Function Start----------------------------------------------

function updateGraphView() {

	// alert ("In updateGraphView");

	// document.getElementById('Packet_DivID_1').innerHTML = "Packet No.: " + PacketNumber;
	

/////////////////////////////////////////////////////////////////////////	
///////////////////////// Gauges Start //////////////////////////////////
/////////////////////////////////////////////////////////////////////////
	
	var SpeedCurrentForGauge;								
	var SpeedCurrentAngle;
	var SpeedCurrentX;
	var SpeedCurrentY;

	var SpeedAverageForGauge;								
	var SpeedAverageAngle;
	var SpeedAverageX;
	var SpeedAverageY;
	
	var DataRateCurrentForGauge;								
	var DataRateCurrentAngle;
	var DataRateCurrentX;
	var DataRateCurrentY;

	var DataRateAverageForGauge;								
	var DataRateAverageAngle;
	var DataRateAverageX;
	var DataRateAverageY;
	
	
	var UplinkCurrentForGauge;								
	var UplinkCurrentAngle;
	var UplinkCurrentX;
	var UplinkCurrentY;

	var UplinkAverageForGauge;								
	var UplinkAverageAngle;
	var UplinkAverageX;
	var UplinkAverageY;	
	
	var LatencyCurrentForGauge;								
	var LatencyCurrentAngle;
	var LatencyCurrentX;
	var LatencyCurrentY;

	var LatencyAverageForGauge;								
	var LatencyAverageAngle;
	var LatencyAverageX;
	var LatencyAverageY;	
	
	var Latency_Ping_CurrentForGauge;								
	var Latency_Ping_CurrentAngle;
	var Latency_Ping_CurrentX;
	var Latency_Ping_CurrentY;

	var Latency_Ping_AverageForGauge;								
	var Latency_Ping_AverageAngle;
	var Latency_Ping_AverageX;
	var Latency_Ping_AverageY;	
	
	
	var PowerCurrentForGauge;								
	var PowerCurrentAngle;
	var PowerCurrentX;
	var PowerCurrentY;

	var PowerAverageForGauge;								
	var PowerAverageAngle;
	var PowerAverageX;
	var PowerAverageY;
	
	
	var pointerRadiusForGauge;
	pointerRadiusForGauge = 40;
	
	/////////////////////////// Math Calculations Start ///////////////////
	
	SpeedCurrentForGauge = Math.min(Math.round(parseFloat(Speed)), 100);
	SpeedCurrentAngle = 210 - (240 * (SpeedCurrentForGauge / 100));
	SpeedCurrentX = pointerRadiusForGauge * (Math.cos(SpeedCurrentAngle * Math.PI / 180));
	SpeedCurrentY = pointerRadiusForGauge * (Math.sin(SpeedCurrentAngle * Math.PI / 180));
	
	SpeedAverageForGauge = Math.min(Math.round(parseFloat(speedAverage)), 100);
	SpeedAverageAngle = 210 - (240 * (SpeedAverageForGauge / 100));
	SpeedAverageX = pointerRadiusForGauge * (Math.cos(SpeedAverageAngle * Math.PI / 180));
	SpeedAverageY = pointerRadiusForGauge * (Math.sin(SpeedAverageAngle * Math.PI / 180));	
	
	
	DataRateCurrentForGauge = Math.min(Math.round(parseFloat(DownloadDataRateFile)), 500);
	DataRateCurrentAngle = 210 - (240 * (DataRateCurrentForGauge / 500));
	DataRateCurrentX = pointerRadiusForGauge * (Math.cos(DataRateCurrentAngle * Math.PI / 180));
	DataRateCurrentY = pointerRadiusForGauge * (Math.sin(DataRateCurrentAngle * Math.PI / 180));
	
	DataRateAverageForGauge = Math.min(Math.round(parseFloat(DownloadDataRateAvg)), 500);
	DataRateAverageAngle = 210 - (240 * (DataRateAverageForGauge / 500));
	DataRateAverageX = pointerRadiusForGauge * (Math.cos(DataRateAverageAngle * Math.PI / 180));
	DataRateAverageY = pointerRadiusForGauge * (Math.sin(DataRateAverageAngle * Math.PI / 180));
	
	
	UplinkCurrentForGauge = Math.min(Math.round(parseFloat(UploadDataRateFile)), 500);
	UplinkCurrentAngle = 210 - (240 * (UplinkCurrentForGauge / 500));
	UplinkCurrentX = pointerRadiusForGauge * (Math.cos(UplinkCurrentAngle * Math.PI / 180));
	UplinkCurrentY = pointerRadiusForGauge * (Math.sin(UplinkCurrentAngle * Math.PI / 180));
	
	UplinkAverageForGauge = Math.min(Math.round(parseFloat(UploadDataRateAvg)), 500);
	UplinkAverageAngle = 210 - (240 * (UplinkAverageForGauge / 500));
	UplinkAverageX = pointerRadiusForGauge * (Math.cos(UplinkAverageAngle * Math.PI / 180));
	UplinkAverageY = pointerRadiusForGauge * (Math.sin(UplinkAverageAngle * Math.PI / 180));	


	LatencyCurrentForGauge = Math.min(Math.round(parseFloat(LatencyDataRateFile)), 500);
	LatencyCurrentAngle = 210 - (240 * (LatencyCurrentForGauge / 500));
	LatencyCurrentX = pointerRadiusForGauge * (Math.cos(LatencyCurrentAngle * Math.PI / 180));
	LatencyCurrentY = pointerRadiusForGauge * (Math.sin(LatencyCurrentAngle * Math.PI / 180));
	
	LatencyAverageForGauge = Math.min(Math.round(parseFloat(LatencyDataRateAvg)), 500);
	LatencyAverageAngle = 210 - (240 * (LatencyAverageForGauge / 500));
	LatencyAverageX = pointerRadiusForGauge * (Math.cos(LatencyAverageAngle * Math.PI / 180));
	LatencyAverageY = pointerRadiusForGauge * (Math.sin(LatencyAverageAngle * Math.PI / 180));
	
	
	Latency_Ping_CurrentForGauge = Math.min(Math.round(parseFloat(Latency_Ping_DataRateFile)), 500);
	Latency_Ping_CurrentAngle = 210 - (240 * (Latency_Ping_CurrentForGauge / 500));
	Latency_Ping_CurrentX = pointerRadiusForGauge * (Math.cos(Latency_Ping_CurrentAngle * Math.PI / 180));
	Latency_Ping_CurrentY = pointerRadiusForGauge * (Math.sin(Latency_Ping_CurrentAngle * Math.PI / 180));
	
	Latency_Ping_AverageForGauge = Math.min(Math.round(parseFloat(Latency_Ping_DataRateAvg)), 500);
	Latency_Ping_AverageAngle = 210 - (240 * (Latency_Ping_AverageForGauge / 500));
	Latency_Ping_AverageX = pointerRadiusForGauge * (Math.cos(Latency_Ping_AverageAngle * Math.PI / 180));
	Latency_Ping_AverageY = pointerRadiusForGauge * (Math.sin(Latency_Ping_AverageAngle * Math.PI / 180));
		
	
	PowerCurrentForGauge = Math.round(parseFloat(Power));
	PowerCurrentAngle = -30 + (240 * (PowerCurrentForGauge / -113));	
	PowerCurrentX = pointerRadiusForGauge * (Math.cos(PowerCurrentAngle * Math.PI / 180));
	PowerCurrentY = pointerRadiusForGauge * (Math.sin(PowerCurrentAngle * Math.PI / 180));
	
	PowerAverageForGauge = Math.round(parseFloat(powerAverage));
	PowerAverageAngle = -30 + (240 * (PowerAverageForGauge / -113));
	PowerAverageX = pointerRadiusForGauge * (Math.cos(PowerAverageAngle * Math.PI / 180));
	PowerAverageY = pointerRadiusForGauge * (Math.sin(PowerAverageAngle * Math.PI / 180));
	
	/////////////////////////// Math Calculations End ////////////////////
	
	
	/////////////////////////// Canvas Drawing Start ////////////////////
	
	speedGaugeCanvas = document.getElementById("speedGaugeCanvas");
	speedGaugeCanvasCTX = speedGaugeCanvas.getContext("2d");
	
	speedGaugeCanvasCTX.clearRect(0, 0, speedGaugeCanvas.width,	speedGaugeCanvas.height);
	
	speedImageForGauge.src = "GaugeTemplate-Speed.png";
	speedGaugeCanvasCTX.drawImage(speedImageForGauge, 0, 0);

	
	speedGaugeCanvasCTX.fillStyle = "#000";
	speedGaugeCanvasCTX.font = "bold 12px sans-serif";
	speedGaugeCanvasCTX.fillText("0", 32, 112);
	speedGaugeCanvasCTX.fillText("100", 97, 112);

	speedGaugeCanvasCTX.fillText("0", 168, 112);
	speedGaugeCanvasCTX.fillText("100", 234, 112);

	speedGaugeCanvasCTX.font = "bold 14px sans-serif";
	speedGaugeCanvasCTX.fillStyle = "#3366cc";
	speedGaugeCanvasCTX.fillText(Math.round(parseFloat(Speed)), 58, 119);
	speedGaugeCanvasCTX.fillText(Math.round(parseFloat(speedAverage)), 195, 119);

	speedGaugeCanvasCTX.beginPath();
	
	speedGaugeCanvasCTX.moveTo(70, 77);
	speedGaugeCanvasCTX.lineTo(SpeedCurrentX + 70, -SpeedCurrentY + 77);

	speedGaugeCanvasCTX.moveTo(208, 77);
	speedGaugeCanvasCTX.lineTo(SpeedAverageX + 208, -SpeedAverageY + 77);

	speedGaugeCanvasCTX.strokeStyle = "#000";
	speedGaugeCanvasCTX.stroke();
	
	
	
	datarateGaugeCanvas = document.getElementById("datarateGaugeCanvas");
	datarateGaugeCanvasCTX = datarateGaugeCanvas.getContext("2d");
	
	datarateGaugeCanvasCTX.clearRect(0, 0, datarateGaugeCanvas.width,	datarateGaugeCanvas.height);
	
	datarateImageForGauge.src = "GaugeTemplate-DownlinkRate.png";
	datarateGaugeCanvasCTX.drawImage(datarateImageForGauge, 0, 0);

	
	datarateGaugeCanvasCTX.fillStyle = "#000";
	datarateGaugeCanvasCTX.font = "bold 12px sans-serif";
	datarateGaugeCanvasCTX.fillText("0", 32, 112);
	datarateGaugeCanvasCTX.fillText("500", 97, 112);

	datarateGaugeCanvasCTX.fillText("0", 168, 112);
	datarateGaugeCanvasCTX.fillText("500", 234, 112);

	datarateGaugeCanvasCTX.font = "bold 14px sans-serif";
	datarateGaugeCanvasCTX.fillStyle = "#3366cc";
	datarateGaugeCanvasCTX.fillText(Math.round(parseFloat(DownloadDataRateFile)), 58, 119);
	datarateGaugeCanvasCTX.fillText(Math.round(parseFloat(DownloadDataRateAvg)), 195, 119);
	datarateGaugeCanvasCTX.font = "bold 13px sans-serif";
	datarateGaugeCanvasCTX.fillStyle = "#2EB800";
	datarateGaugeCanvasCTX.fillText("Max: " + Math.round(parseFloat(DownloadDataRateMax)), 110, 143);
	

	datarateGaugeCanvasCTX.beginPath();
	
	datarateGaugeCanvasCTX.moveTo(70, 77);
	datarateGaugeCanvasCTX.lineTo(DataRateCurrentX + 70, -DataRateCurrentY + 77);

	datarateGaugeCanvasCTX.moveTo(208, 77);
	datarateGaugeCanvasCTX.lineTo(DataRateAverageX + 208, -DataRateAverageY + 77);

	datarateGaugeCanvasCTX.strokeStyle = "#000";
	datarateGaugeCanvasCTX.stroke();
	
	
	
	
	uplinkGaugeCanvas = document.getElementById("uplinkGaugeCanvas");
	uplinkGaugeCanvasCTX = uplinkGaugeCanvas.getContext("2d");
	
	uplinkGaugeCanvasCTX.clearRect(0, 0, uplinkGaugeCanvas.width,	uplinkGaugeCanvas.height);
	
	uplinkImageForGauge.src = "GaugeTemplate-UplinkRate.png";
	uplinkGaugeCanvasCTX.drawImage(uplinkImageForGauge, 0, 0);

	
	uplinkGaugeCanvasCTX.fillStyle = "#000";
	uplinkGaugeCanvasCTX.font = "bold 12px sans-serif";
	uplinkGaugeCanvasCTX.fillText("0", 32, 112);
	uplinkGaugeCanvasCTX.fillText("500", 97, 112);

	uplinkGaugeCanvasCTX.fillText("0", 168, 112);
	uplinkGaugeCanvasCTX.fillText("500", 234, 112);

	uplinkGaugeCanvasCTX.font = "bold 14px sans-serif";
	uplinkGaugeCanvasCTX.fillStyle = "#3366cc";
	uplinkGaugeCanvasCTX.fillText(Math.round(parseFloat(UploadDataRateFile)), 58, 119);
	uplinkGaugeCanvasCTX.fillText(Math.round(parseFloat(UploadDataRateAvg)), 195, 119);
	uplinkGaugeCanvasCTX.font = "bold 13px sans-serif";
	uplinkGaugeCanvasCTX.fillStyle = "#2EB800";
	uplinkGaugeCanvasCTX.fillText("Max: " + Math.round(parseFloat(UploadDataRateMax)), 110, 143);


	uplinkGaugeCanvasCTX.beginPath();
	
	uplinkGaugeCanvasCTX.moveTo(70, 77);
	uplinkGaugeCanvasCTX.lineTo(UplinkCurrentX + 70, -UplinkCurrentY + 77);

	uplinkGaugeCanvasCTX.moveTo(208, 77);
	uplinkGaugeCanvasCTX.lineTo(UplinkAverageX + 208, -UplinkAverageY + 77);

	uplinkGaugeCanvasCTX.strokeStyle = "#000";
	uplinkGaugeCanvasCTX.stroke();
	
		
		

	latencyGaugeCanvas = document.getElementById("latencyGaugeCanvas");
	latencyGaugeCanvasCTX = latencyGaugeCanvas.getContext("2d");
	
	latencyGaugeCanvasCTX.clearRect(0, 0, latencyGaugeCanvas.width,	latencyGaugeCanvas.height);
	
	latencyImageForGauge.src = "GaugeTemplate-LatencyHTTP.png";
	latencyGaugeCanvasCTX.drawImage(latencyImageForGauge, 0, 0);

	
	latencyGaugeCanvasCTX.fillStyle = "#000";
	latencyGaugeCanvasCTX.font = "bold 12px sans-serif";
	latencyGaugeCanvasCTX.fillText("0", 32, 112);
	latencyGaugeCanvasCTX.fillText("500", 97, 112);

	latencyGaugeCanvasCTX.fillText("0", 168, 112);
	latencyGaugeCanvasCTX.fillText("500", 234, 112);

	latencyGaugeCanvasCTX.font = "bold 14px sans-serif";
	latencyGaugeCanvasCTX.fillStyle = "#3366cc";
	latencyGaugeCanvasCTX.fillText(parseFloat(LatencyDataRateFile), 58, 119);
	latencyGaugeCanvasCTX.fillText(parseFloat(LatencyDataRateAvg), 195, 119);	
	latencyGaugeCanvasCTX.font = "bold 13px sans-serif";
	latencyGaugeCanvasCTX.fillStyle = "#2EB800";
	latencyGaugeCanvasCTX.fillText("Min: " + Math.round(parseFloat(LatencyDataRateMin)), 110, 143);
	

	latencyGaugeCanvasCTX.beginPath();
	
	latencyGaugeCanvasCTX.moveTo(70, 77);
	latencyGaugeCanvasCTX.lineTo(LatencyCurrentX + 70, -LatencyCurrentY + 77);

	latencyGaugeCanvasCTX.moveTo(208, 77);
	latencyGaugeCanvasCTX.lineTo(LatencyAverageX + 208, -LatencyAverageY + 77);

	latencyGaugeCanvasCTX.strokeStyle = "#000";
	latencyGaugeCanvasCTX.stroke();
	
	
	
	latency_Ping_GaugeCanvas = document.getElementById("latency_Ping_GaugeCanvas");
	latency_Ping_GaugeCanvasCTX = latency_Ping_GaugeCanvas.getContext("2d");
	
	latency_Ping_GaugeCanvasCTX.clearRect(0, 0, latency_Ping_GaugeCanvas.width,	latency_Ping_GaugeCanvas.height);
	
	latency_Ping_ImageForGauge.src = "GaugeTemplate-LatencyPing.png";
	latency_Ping_GaugeCanvasCTX.drawImage(latency_Ping_ImageForGauge, 0, 0);

	
	latency_Ping_GaugeCanvasCTX.fillStyle = "#000";
	latency_Ping_GaugeCanvasCTX.font = "bold 12px sans-serif";
	latency_Ping_GaugeCanvasCTX.fillText("0", 32, 112);
	latency_Ping_GaugeCanvasCTX.fillText("500", 97, 112);

	latency_Ping_GaugeCanvasCTX.fillText("0", 168, 112);
	latency_Ping_GaugeCanvasCTX.fillText("500", 234, 112);

	latency_Ping_GaugeCanvasCTX.font = "bold 14px sans-serif";
	latency_Ping_GaugeCanvasCTX.fillStyle = "#3366cc";
	latency_Ping_GaugeCanvasCTX.fillText(parseFloat(Latency_Ping_DataRateFile), 58, 119);
	latency_Ping_GaugeCanvasCTX.fillText(parseFloat(Latency_Ping_DataRateAvg), 195, 119);	
	latency_Ping_GaugeCanvasCTX.font = "bold 13px sans-serif";
	latency_Ping_GaugeCanvasCTX.fillStyle = "#2EB800";
	latency_Ping_GaugeCanvasCTX.fillText("Min: " + Math.round(parseFloat(Latency_Ping_DataRateMin)), 110, 143);

	latency_Ping_GaugeCanvasCTX.beginPath();
	
	latency_Ping_GaugeCanvasCTX.moveTo(70, 77);
	latency_Ping_GaugeCanvasCTX.lineTo(Latency_Ping_CurrentX + 70, -Latency_Ping_CurrentY + 77);

	latency_Ping_GaugeCanvasCTX.moveTo(208, 77);
	latency_Ping_GaugeCanvasCTX.lineTo(Latency_Ping_AverageX + 208, -Latency_Ping_AverageY + 77);

	latency_Ping_GaugeCanvasCTX.strokeStyle = "#000";
	latency_Ping_GaugeCanvasCTX.stroke();
	
	
		
	powerGaugeCanvas = document.getElementById("powerGaugeCanvas");
	powerGaugeCanvasCTX = powerGaugeCanvas.getContext("2d");
	
	powerGaugeCanvasCTX.clearRect(0, 0, powerGaugeCanvas.width,	powerGaugeCanvas.height);
	
	powerImageForGauge.src = "GaugeTemplate-Power.png";
	powerGaugeCanvasCTX.drawImage(powerImageForGauge, 0, 0);

		
	powerGaugeCanvasCTX.fillStyle = "#000";
	powerGaugeCanvasCTX.font = "bold 12px sans-serif";
	powerGaugeCanvasCTX.fillText("-113", 25, 112);
	powerGaugeCanvasCTX.fillText("0", 97, 112);

	powerGaugeCanvasCTX.fillText("-113", 161, 112);
	powerGaugeCanvasCTX.fillText("0", 234, 112);

	powerGaugeCanvasCTX.font = "bold 14px sans-serif";
	powerGaugeCanvasCTX.fillStyle = "#3366cc";
	powerGaugeCanvasCTX.fillText(Math.round(parseFloat(Power)), 58, 119);
	powerGaugeCanvasCTX.fillText(Math.round(parseFloat(powerAverage)), 195, 119);

	powerGaugeCanvasCTX.beginPath();
	
	powerGaugeCanvasCTX.moveTo(70, 77);
	powerGaugeCanvasCTX.lineTo(PowerCurrentX + 70, -PowerCurrentY + 77);
	
	powerGaugeCanvasCTX.moveTo(208, 77);
	powerGaugeCanvasCTX.lineTo(PowerAverageX + 208, -PowerAverageY + 77);

	powerGaugeCanvasCTX.strokeStyle = "#000";
	powerGaugeCanvasCTX.stroke();
	
	

	/////////////////////////// Canvas Drawing End  //////////////////////	

/////////////////////////////////////////////////////////////////////////	
///////////////////////// Gauges End ////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
	
	
	

	speedTrendlineCanvas = document.getElementById("speedCanvas");
	speedTrendlineCTX = speedTrendlineCanvas.getContext("2d");

	speedTrendlineCTX.clearRect(0, 0, speedTrendlineCanvas.width,
			speedTrendlineCanvas.height);

	speedTrendlineCTX.beginPath();
	for ( var x = 0.5; x < 250; x += 10) {
		speedTrendlineCTX.moveTo(x, 0);
		speedTrendlineCTX.lineTo(x, 100);
	}
	for ( var y = 0.5; y < 100; y += 10) {
		speedTrendlineCTX.moveTo(0, y);
		speedTrendlineCTX.lineTo(250, y);
	}
	speedTrendlineCTX.strokeStyle = "#eee";
	speedTrendlineCTX.stroke();

	speedTrendlineCTX.font = "bold 12px sans-serif";
	speedTrendlineCTX.fillText("(meters\/sec)", 95, 15); // uses escape
															// character
	speedTrendlineCTX.fillText("100", 2, 15);
	speedTrendlineCTX.fillText("0", 2, 100);
	
	
	

	downloadDataRateTrendlineCanvas = document
			.getElementById("downloadDataRateCanvas");
	downloadDataRateTrendlineCTX = downloadDataRateTrendlineCanvas
			.getContext("2d");

	downloadDataRateTrendlineCTX.clearRect(0, 0,
			downloadDataRateTrendlineCanvas.width,
			downloadDataRateTrendlineCanvas.height);

	downloadDataRateTrendlineCTX.beginPath();
	for ( var x = 0.5; x < 250; x += 10) {
		downloadDataRateTrendlineCTX.moveTo(x, 0);
		downloadDataRateTrendlineCTX.lineTo(x, 100);
	}
	for ( var y = 0.5; y < 100; y += 10) {
		downloadDataRateTrendlineCTX.moveTo(0, y);
		downloadDataRateTrendlineCTX.lineTo(250, y);
	}
	downloadDataRateTrendlineCTX.strokeStyle = "#eee";
	downloadDataRateTrendlineCTX.stroke();

	downloadDataRateTrendlineCTX.font = "bold 12px sans-serif";
	downloadDataRateTrendlineCTX.fillText("(KBits\/sec)", 95, 15); // uses
																	// escape
																	// character
	downloadDataRateTrendlineCTX.fillText("500", 2, 15);
	downloadDataRateTrendlineCTX.fillText("0", 2, 100);
	
	
	
	uploadDataRateTrendlineCanvas = document
		.getElementById("uploadDataRateCanvas");
	uploadDataRateTrendlineCTX = uploadDataRateTrendlineCanvas
		.getContext("2d");

	uploadDataRateTrendlineCTX.clearRect(0, 0,
			uploadDataRateTrendlineCanvas.width,
			uploadDataRateTrendlineCanvas.height);

	uploadDataRateTrendlineCTX.beginPath();
	for ( var x = 0.5; x < 250; x += 10) {
		uploadDataRateTrendlineCTX.moveTo(x, 0);
		uploadDataRateTrendlineCTX.lineTo(x, 100);
	}
	for ( var y = 0.5; y < 100; y += 10) {
		uploadDataRateTrendlineCTX.moveTo(0, y);
		uploadDataRateTrendlineCTX.lineTo(250, y);
	}
	uploadDataRateTrendlineCTX.strokeStyle = "#eee";
	uploadDataRateTrendlineCTX.stroke();

	uploadDataRateTrendlineCTX.font = "bold 12px sans-serif";
	uploadDataRateTrendlineCTX.fillText("(KBits\/sec)", 95, 15); // uses
															// escape
															// character
	uploadDataRateTrendlineCTX.fillText("500", 2, 15);
	uploadDataRateTrendlineCTX.fillText("0", 2, 100);
	
		
	

	latencyTrendlineCanvas = document.getElementById("latencyCanvas");
	latencyTrendlineCTX = latencyTrendlineCanvas.getContext("2d");

	latencyTrendlineCTX.clearRect(0, 0, latencyTrendlineCanvas.width,
			latencyTrendlineCanvas.height);

	latencyTrendlineCTX.beginPath();
	for ( var x = 0.5; x < 250; x += 10) {
		latencyTrendlineCTX.moveTo(x, 0);
		latencyTrendlineCTX.lineTo(x, 100);
	}
	for ( var y = 0.5; y < 100; y += 10) {
		latencyTrendlineCTX.moveTo(0, y);
		latencyTrendlineCTX.lineTo(250, y);
	}
	latencyTrendlineCTX.strokeStyle = "#eee";
	latencyTrendlineCTX.stroke();

	latencyTrendlineCTX.font = "bold 12px sans-serif";
	latencyTrendlineCTX.fillText("(msec)", 95, 15);
	latencyTrendlineCTX.fillText("500", 2, 15);
	latencyTrendlineCTX.fillText("0", 2, 100);
	
	


	latency_Ping_TrendlineCanvas = document.getElementById("Latency_Ping_Canvas");
	latency_Ping_TrendlineCTX = latency_Ping_TrendlineCanvas.getContext("2d");

	latency_Ping_TrendlineCTX.clearRect(0, 0, latency_Ping_TrendlineCanvas.width,
			latency_Ping_TrendlineCanvas.height);

	latency_Ping_TrendlineCTX.beginPath();
	for ( var x = 0.5; x < 250; x += 10) {
		latency_Ping_TrendlineCTX.moveTo(x, 0);
		latency_Ping_TrendlineCTX.lineTo(x, 100);
	}
	for ( var y = 0.5; y < 100; y += 10) {
		latency_Ping_TrendlineCTX.moveTo(0, y);
		latency_Ping_TrendlineCTX.lineTo(250, y);
	}
	latency_Ping_TrendlineCTX.strokeStyle = "#eee";
	latency_Ping_TrendlineCTX.stroke();

	latency_Ping_TrendlineCTX.font = "bold 12px sans-serif";
	latency_Ping_TrendlineCTX.fillText("(msec)", 95, 15);
	latency_Ping_TrendlineCTX.fillText("500", 2, 15);
	latency_Ping_TrendlineCTX.fillText("0", 2, 100);	
	
	
	
	
	

	powerTrendlineCanvas = document.getElementById("powerCanvas");
	powerTrendlineCTX = powerTrendlineCanvas.getContext("2d");

	powerTrendlineCTX.clearRect(0, 0, powerTrendlineCanvas.width,
			powerTrendlineCanvas.height);

	powerTrendlineCTX.beginPath();
	for ( var x = 0.5; x < 250; x += 10) {
		powerTrendlineCTX.moveTo(x, 0);
		powerTrendlineCTX.lineTo(x, 100);
	}
	for ( var y = 0.5; y < 100; y += 10) {
		powerTrendlineCTX.moveTo(0, y);
		powerTrendlineCTX.lineTo(250, y);
	}
	powerTrendlineCTX.strokeStyle = "#eee";
	powerTrendlineCTX.stroke();

	powerTrendlineCTX.font = "bold 12px sans-serif";
	powerTrendlineCTX.fillText("(dBm)", 95, 15);
	powerTrendlineCTX.fillText("-50", 2, 15);
	powerTrendlineCTX.fillText("-113", 2, 100);
	
	

	for ( var x = 0; x < 5; x++) {
		SpeedArrayForTrendline[x] = Math.round(parseFloat(SpeedArray[x]));

		if (SpeedArrayForTrendline[x] > 100) {
			SpeedArrayForTrendline[x] = 100;
		}

		SpeedArrayForTrendline[x] = 100 - (100 * (SpeedArrayForTrendline[x] / 100)); // denominator
																						// 100
	}

	speedTrendlineCTX.beginPath();
	speedTrendlineCTX.moveTo(0, SpeedArrayForTrendline[0]);
	speedTrendlineCTX.lineTo(62.5, SpeedArrayForTrendline[1]);
	speedTrendlineCTX.lineTo(125, SpeedArrayForTrendline[2]);
	speedTrendlineCTX.lineTo(187.5, SpeedArrayForTrendline[3]);
	speedTrendlineCTX.lineTo(250, SpeedArrayForTrendline[4]);
	speedTrendlineCTX.strokeStyle = "#00F";
	speedTrendlineCTX.stroke();
	
	

	for ( var x = 0; x < 5; x++) {
		DownloadDataRateFileArrayForTrendline[x] = Math
				.round(parseFloat(DownloadDataRateFileArray[x]));

		if (DownloadDataRateFileArrayForTrendline[x] > 500) {
			DownloadDataRateFileArrayForTrendline[x] = 500;
		}

		DownloadDataRateFileArrayForTrendline[x] = 100 - (100 * (DownloadDataRateFileArrayForTrendline[x] / 500)); // denominator
																													// 500
	}

	downloadDataRateTrendlineCTX.beginPath();
	downloadDataRateTrendlineCTX.moveTo(0,
			DownloadDataRateFileArrayForTrendline[0]);
	downloadDataRateTrendlineCTX.lineTo(62.5,
			DownloadDataRateFileArrayForTrendline[1]);
	downloadDataRateTrendlineCTX.lineTo(125,
			DownloadDataRateFileArrayForTrendline[2]);
	downloadDataRateTrendlineCTX.lineTo(187.5,
			DownloadDataRateFileArrayForTrendline[3]);
	downloadDataRateTrendlineCTX.lineTo(250,
			DownloadDataRateFileArrayForTrendline[4]);
	downloadDataRateTrendlineCTX.strokeStyle = "#00F";
	downloadDataRateTrendlineCTX.stroke();
	
	
	
	
	for ( var x = 0; x < 5; x++) {
		UploadDataRateFileArrayForTrendline[x] = Math
				.round(parseFloat(UploadDataRateFileArray[x]));

		if (UploadDataRateFileArrayForTrendline[x] > 500) {
			UploadDataRateFileArrayForTrendline[x] = 500;
		}

		UploadDataRateFileArrayForTrendline[x] = 100 - (100 * (UploadDataRateFileArrayForTrendline[x] / 500)); // denominator
																													// 500
	}

	uploadDataRateTrendlineCTX.beginPath();
	uploadDataRateTrendlineCTX.moveTo(0,
			UploadDataRateFileArrayForTrendline[0]);
	uploadDataRateTrendlineCTX.lineTo(62.5,
			UploadDataRateFileArrayForTrendline[1]);
	uploadDataRateTrendlineCTX.lineTo(125,
			UploadDataRateFileArrayForTrendline[2]);
	uploadDataRateTrendlineCTX.lineTo(187.5,
			UploadDataRateFileArrayForTrendline[3]);
	uploadDataRateTrendlineCTX.lineTo(250,
			UploadDataRateFileArrayForTrendline[4]);
	uploadDataRateTrendlineCTX.strokeStyle = "#00F";
	uploadDataRateTrendlineCTX.stroke();
	
	
	
	

	for ( var x = 0; x < 5; x++) {
		DataPushLatencyPacketArrayForTrendline[x] = Math
				.round(parseFloat(DataPushLatencyPacketArray[x]));

		if (DataPushLatencyPacketArrayForTrendline[x] > 500) {
			DataPushLatencyPacketArrayForTrendline[x] = 500;
		}

		DataPushLatencyPacketArrayForTrendline[x] = 100 - (100 * (DataPushLatencyPacketArrayForTrendline[x] / 500)); // denominator
																														// 500
	}	

	latencyTrendlineCTX.beginPath();
	latencyTrendlineCTX.moveTo(0, DataPushLatencyPacketArrayForTrendline[0]);
	latencyTrendlineCTX.lineTo(62.5, DataPushLatencyPacketArrayForTrendline[1]);
	latencyTrendlineCTX.lineTo(125, DataPushLatencyPacketArrayForTrendline[2]);
	latencyTrendlineCTX
			.lineTo(187.5, DataPushLatencyPacketArrayForTrendline[3]);
	latencyTrendlineCTX.lineTo(250, DataPushLatencyPacketArrayForTrendline[4]);
	latencyTrendlineCTX.strokeStyle = "#00F";
	latencyTrendlineCTX.stroke();
	
	
	
	for ( var x = 0; x < 5; x++) {
		DataPushLatency_Ping_PacketArrayForTrendline[x] = Math
				.round(parseFloat(DataPushLatency_Ping_PacketArray[x]));

		if (DataPushLatency_Ping_PacketArrayForTrendline[x] > 500) {
			DataPushLatency_Ping_PacketArrayForTrendline[x] = 500;
		}

		DataPushLatency_Ping_PacketArrayForTrendline[x] = 100 - (100 * (DataPushLatency_Ping_PacketArrayForTrendline[x] / 500)); // denominator
																														// 500
	}	

	latency_Ping_TrendlineCTX.beginPath();
	latency_Ping_TrendlineCTX.moveTo(0, DataPushLatency_Ping_PacketArrayForTrendline[0]);
	latency_Ping_TrendlineCTX.lineTo(62.5, DataPushLatency_Ping_PacketArrayForTrendline[1]);
	latency_Ping_TrendlineCTX.lineTo(125, DataPushLatency_Ping_PacketArrayForTrendline[2]);
	latency_Ping_TrendlineCTX
			.lineTo(187.5, DataPushLatency_Ping_PacketArrayForTrendline[3]);
	latency_Ping_TrendlineCTX.lineTo(250, DataPushLatency_Ping_PacketArrayForTrendline[4]);
	latency_Ping_TrendlineCTX.strokeStyle = "#00F";
	latency_Ping_TrendlineCTX.stroke();
	
	
		
	

	for ( var x = 0; x < 5; x++) {
		PowerArrayForTrendline[x] = Math.round(parseFloat(PowerArray[x]));

		if (PowerArrayForTrendline[x] > 500) {
			PowerArrayForTrendline[x] = 500;
		}

		PowerArrayForTrendline[x] = 100 * (PowerArrayForTrendline[x] / -113); // denominator
																				// 500
	}

	powerTrendlineCTX.beginPath();
	powerTrendlineCTX.moveTo(0, PowerArrayForTrendline[0]);
	powerTrendlineCTX.lineTo(62.5, PowerArrayForTrendline[1]);
	powerTrendlineCTX.lineTo(125, PowerArrayForTrendline[2]);
	powerTrendlineCTX.lineTo(187.5, PowerArrayForTrendline[3]);
	powerTrendlineCTX.lineTo(250, PowerArrayForTrendline[4]);
	powerTrendlineCTX.strokeStyle = "#00F";
	powerTrendlineCTX.stroke();

	
	
	
	
	
	/*////////////////////////////////////////////////////////////////////
	callDoctorCanvas = document.getElementById("callDoctorCanvas");
	callDoctorCTX = callDoctorCanvas.getContext("2d");

	callDoctorCTX.clearRect(0, 0, callDoctorCanvas.width,
			callDoctorCanvas.height);

	callDoctorCTX.beginPath();
	for ( var x = 0.5; x < 300; x += 10) {
		callDoctorCTX.moveTo(x, 0);
		callDoctorCTX.lineTo(x, 150);
	}
	for ( var y = 0.5; y < 150; y += 10) {
		callDoctorCTX.moveTo(0, y);
		callDoctorCTX.lineTo(300, y);
	}
	callDoctorCTX.strokeStyle = "#eee";
	callDoctorCTX.stroke();
	
	callDoctorCTX.fillStyle = "#000";;

	callDoctorCTX.font = "bold 10px sans-serif";
	callDoctorCTX.fillText("Attempts", 40, 15); 
	
	callDoctorCTX.fillText("Success", 120, 15); 
	
	callDoctorCTX.fillText("Failure", 220, 15);
	
	//callDoctorCTX.fillText("Setup Time", 235, 15); 
	
	callDoctorCTX.font = "bold 12px sans-serif";
	callDoctorCTX.fillText("10", 2, 15);
	callDoctorCTX.fillText("0", 2, 150);
	
	//callDoctorCTX.fillText("5", 290, 15);
	//callDoctorCTX.fillText("0", 290, 150);
	
	
	callDoctorCTX.fillStyle = "#3366cc";;
	
	

	//callDoctorCTX.fillRect(40, 150-((8/10) * 150), 25, callDoctorCanvas.height);
	
	callDoctorCTX.fillRect(40, 150-((CallDoctorOriginationAttempts/10) * 150), 25, callDoctorCanvas.height);

	callDoctorCTX.fillRect(120, 150-((CallDoctorOriginationSuccesses/10) * 150), 25, callDoctorCanvas.height);

	callDoctorCTX.fillRect(210, 150-((CallDoctorOriginationFailures/10) * 150), 25, callDoctorCanvas.height);

	//callDoctorCTX.fillRect(250, 150-((0/5) * 150), 25, callDoctorCanvas.height);
	
	*/////////////////////////////////////////////////////////////////////////////////
	
	
	//var myVar;
	
	// document.getElementById('speedCurrentIndicator').style.position =
	// 'relative';
	// JSTweener.addTween(speedCurrentIndicator.style, {
	// time : 1,
	// transition : "easeOutBounce",
	// top : 10,
	// left : -250 + parseInt(Speed)
	// });
	//
	// document.getElementById('speedAverageIndicator').style.position =
	// 'relative';
	// JSTweener.addTween(speedAverageIndicator.style, {
	// time : 1,
	// transition : "easeOutBounce",
	// top : 10,
	// left : -250 + 0
	// });
	//
	// document.getElementById('DataRateCurrentIndicator').style.position =
	// 'relative';
	// JSTweener.addTween(DataRateCurrentIndicator.style, {
	// time : 1,
	// transition : "easeOutBounce",
	// top : 10,
	// left : -250 + (parseInt(DownloadDataRateFile) / 10)
	// });
	//
	// document.getElementById('DataRateAverageIndicator').style.position =
	// 'relative';
	// JSTweener.addTween(DataRateAverageIndicator.style, {
	// time : 1,
	// transition : "easeOutBounce",
	// top : 10,
	// left : -250 + (parseInt(DownloadDataRateAvg) / 10)
	// });

	// myVar = Math.round(parseFloat(LatencyDataRateFile));
	//
	// if (myVar > 500) {
	// myVar = 500;
	// }
	//			
	// myVar = 250 * (myVar / 500); //denominator 500

	// document.getElementById('latencyCurrentIndicator').style.position =
	// 'relative';
	// JSTweener.addTween(latencyCurrentIndicator.style, {
	// time : 1,
	// transition : "easeOutBounce",
	// left: 20 + myVar //20 is left end of bar and 270 is right end of bar
	// });

	// myVar = Math.round(parseFloat(LatencyDataRateAvg));
	//
	// if (myVar > 500) {
	// myVar = 500;
	// }

	// myVar = 250 * (myVar / 500); //denominator 500

	// document.getElementById('latencyAverageIndicator').style.position =
	// 'relative';
	// JSTweener.addTween(latencyAverageIndicator.style, {
	// time : 1,
	// transition : "easeOutBounce",
	// left: 20 + myVar //20 is left end of bar and 270 is right end of bar
	// });

	// document.getElementById('powerCurrentIndicator').style.position =
	// 'relative';
	// JSTweener.addTween(powerCurrentIndicator.style, {
	// time : 1,
	// transition : "easeOutBounce",
	// top : 10,
	// left : -100 + parseInt(Power)
	// });

	// document.getElementById('powerAverageIndicator').style.position =
	// 'relative';
	// JSTweener.addTween(powerAverageIndicator.style, {
	// time : 1,
	// transition : "easeOutBounce",
	// top : 10,
	// left : -250 + 0
	// });

}
