Measurements Graph HTML
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 ©2013 GPL2+</font> <br><br>
</td></tr></table>
</div>
</form>
</body>
</html>
Document Actions
