Personal tools
Navigation
 

Measurements Graph HTML

HTML icon measurements.html — HTML, 6 kB (6602 bytes)

File contents

<html>
<head>
<title>***Measurement Graph***</title>
<style type="text/css" >
 .noborder {
	 border : 0px;
	 background: transparent;
	 background: transparent;
	 overflow: hidden;
 }

 </style>

<style type="text/css" media="print">
 .DoNotPrint {
	 display: none;
 }
 </style>

<!-- wz_jsgraphics.js -->
<script type="text/javascript" src="${oscar_javascript_path}eforms/jsgraphics.js">
</script>

<script language="javascript">
function formPrint(){
	window.print();
} 
</script>


<script type="text/javascript" language="javascript">

var measureArray=[];
var measureDateArray=[];
var ms2yr=1/1000/60/60/24/365;//convert ms to years
var xbox=50
var ybox=50
var boxwidth=700
var boxheight=500
var pad=30

function myDrawFunction(){
	var jg = new jsGraphics("myCanvas");
	jg.setPrintable(true);
	jg.setColor("black");
	jg.setStroke(3); 
	jg.drawRect(xbox-pad,ybox-pad,boxwidth+2*pad,boxheight+2*pad);
	jg.paint();
	drawMeasures();
}

function drawMeasures(){
	jg.setColor("red");
	jg.setStroke(2); 
	measureArray=[];
	measureDateArray=[];
	getMeasures(document.getElementById('measurementType').value);
	var x;
	var b= document.getElementById('dob').value;
	var birthdate= new Date(b);
	var n=measureArray[0].split("/");
	var min=Number(n[0]);
	var max=min;
	var y;
	var len=measureArray.length;
	var total=0;
	var Ypoints = new Array();
	for (var i = 0; i < len; i++) {
		n=measureArray[i].split("/");
		y=Number(n[0]);
		if (y<min) {min=y;}
		if (y>max) {max=y;}
		total=total+y;
	}

	for (var i = 0; i < len; i++) {
		n=measureArray[i].split("/");
		y=Number(n[0]);
		Ypoints.push(boxheight+ybox-((y-min)*(boxheight)/(max-min)));
	}


	var Dmin=new Date(measureDateArray[0].substring(0,10));
	var Dmax=new Date(measureDateArray[0].substring(0,10));
	var Xpoints = new Array();
	var tmp;
	for (var i = 0; i < len; i++) {
		var Dx=new Date(measureDateArray[i].substring(0,10));
		if (Dx<Dmin) {Dmin=Dx;}
		if (Dx>Dmax) {Dmax=Dx;}
	}

	var maxd=(Dmax - birthdate)*ms2yr;
	var mind=(Dmin - birthdate)*ms2yr;

	for (var i = 0; i < len; i++) {
		var Dx=new Date(measureDateArray[i].substring(0,10));
		var age=(Dx - birthdate)*ms2yr;
		tmp=xbox+((age-mind)*(boxwidth)/(maxd-mind));
		Xpoints.push(tmp);
	}

	jg.setPrintable(true);
	jg.drawPolyline(Xpoints,Ypoints);
	jg.setColor("maroon");
	jg.setFont("arial","15px",Font.PLAIN);
	for (var i = 0; i < len; i++) {
		var str=String("<p title='"+measureDateArray[i]+"'>"+measureArray[i]+"</p>");
		jg.drawString(str,Xpoints[i]-10,Ypoints[i]-20);		
	}
	jg.setColor("black");
	var str=String(measureDateArray[0]);
	jg.drawString(str,Xpoints[0]-pad-20,(ybox+boxheight+10));
	var str=String(measureDateArray[len-1]);
	jg.drawString(str,Xpoints[len-1]-pad+4,(ybox+boxheight+10));

	jg.setStroke(Stroke.DOTTED);
	var avr=total/len;
	y=boxheight+ybox-((avr-min)*(boxheight)/(max-min));
	avr=(avr.toPrecision(3));
	jg.drawString("average",(boxwidth+xbox)-30,y-15);
	jg.drawString(avr,(boxwidth+xbox)-30,y);
	jg.drawLine(xbox,y,boxwidth+xbox,y);

jg.paint();
}

function getMeasures(measure) {
	xmlhttp=new XMLHttpRequest();
	var pathArray = window.location.pathname.split( '/' );
	var newURL = window.location.protocol + "//" + window.location.host +"/"+pathArray[1]+"/oscarEncounter/oscarMeasurements/SetupDisplayHistory.do?type="+measure;
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			var str=xmlhttp.responseText; //local variable
			if (!str) { return; }
			var myRe = /<td width="10">([d,.,/]+)</td>/g;  //for the measurement
			var myArray;
			var i=0;
			while ((myArray = myRe.exec(str)) !== null){
				measureArray[i]=myArray[1];
				i=i+1;
			}

			var myRe = /<td width="150">([0-9,-]+)</td>s*<td width="150">/g;  //the first date is the observation date
			var myArray;
			var i=0;
			while ((myArray = myRe.exec(str)) !== null){
				measureDateArray[i]=myArray[1];
				i=i+1;
			}

		}
	}
	xmlhttp.open("GET",newURL,false);
	xmlhttp.send();

}

</script> 


</head>

<body onload=" myDrawFunction(); ">

<div id="myCanvas"
	style="position:absolute; left: 0px; top:60px; width: 750px; height: 550px;" > 
</div>
<form method="post" action="" name="inputForm" id="inputForm" >
<div class="DoNotPrint" style="position: absolute; top:30px; left:150px;" id="TopButtons" >

<table><tr><td>
	<select onchange="document.getElementById('measurementType').value=this.options[this.selectedIndex].value; jg.clear(); drawMeasures();">
		<option value="BP">BP</option>		
		<option value="WT">Weight</option>
		<option value="HT">Height</option>
		<option value="BMI">BMI</option>
		<option value="A1C">A1C</option>
		<option value="Hb">HGB</option>
		<option value="INR">INR</option>
		<option value="SCR">Creat</option>
		<option value="TCHL">Cholesterol</option>
		<option value="LDL">LDL</option>
		<option value="HDL">HDL</option>
	</select> 
	<input value="Clear Graph" name="clean" id="clean" type="button" onclick="jg.clear();">  
	<input value="Plot" name="PlotButton" id="PlotButton" type="button"  onclick="jg.clear(); drawMeasures();"> 
	<input value="Print" name="PrintButton" id="PrintButton" type="button" onclick="formPrint();"> 		

</td></tr></table>
</div>

<input name="patient_name" id="patient_name" type="text" class="noborder" style="position:absolute; left:484px; top:29px; width:238px; height:18px; font-family:sans-serif; font-style:normal; font-weight:normal; font-size:16px; text-align:left; background-color:transparent;"  oscarDB=patient_name>
<input name="measurementType" id="measurementType" type="text" class="noborder" style="position:absolute; left:50px; top:29px; width:100px; height:38px; font-family:sans-serif; font-style:normal; font-weight:bold; font-size:30px; text-align:left; background-color:transparent;"  value="BP">
<input name="dob" id="dob" type="text" class="noborder" style="position:absolute; left:484px; top:50px; width:105px; height:18px; font-family:sans-serif; font-style:normal; font-weight:normal; font-size:12px; text-align:left; background-color:transparent;"  oscarDB=dobc2> <!-- dobc2 2013/02/25 -->

<input name="PatientGender" id="PatientGender" type="hidden" oscarDB=sex>
<input name="today" id="today" type="hidden" oscarDB=today> <!-- 2013-11-25 -->

<script type="text/javascript">
<!--
var cnv = document.getElementById("myCanvas");
var jg = new jsGraphics(cnv);
//-->
</script> 


<div class="DoNotPrint" style="position: absolute; top:640px; left:30px;" id="Bottom" >
	 <table><tr><td>
<font face="Arial,Helvetica,sans-serif" size="1" > Oscar eform by PHC &copy;2013 GPL2+</font> <br><br>
	 </td></tr></table>
</div>
</form>

</body>
</html>

Document Actions

 

Download button

DOWNLOAD OSCAR FOR TESTING

 

eForms button

DOWNLOAD SHARED E-FORMS


 Customize button

FIND PLUG-INS AND TWEAKS
FOR YOUR OSCAR EMR

 

Subscribe Button

SUBSCRIBE TO DISCUSSION LIST 
(SEE ALL LISTS)

  

Help button

ACCESS THE ONLINE MANUALS
(PAID SUPPORT)