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