In this post we will draw ECG using Java script draw library functions, the output will looks like the above image.
To draw ECG we need to identify few things 1st :
1.ECG baseline used.
2.Sampling rate : no of readings per seconds.
1. We will have 1 html div component to draw the ECG inside:
<div id="Canvas" style="background-image: url(ecg_back.png); position: relative; height: 250px; width: 1000px;"></div>
This is the div background image, its 250x50, this will typically fit for 1 Second (so you need to draw samples in this box according to your sampling rate, in our example we have 500/seconds so we draw 500 per this 250 pixel , so we will increment the draw by 0.5 for each sample).
2. Import the graphics library: (in the header)
<script type="text/javascript" src="wz_jsgraphics.js"></script>
You can download this library from the URL:
https://code.google.com/p/eucaly61-java/downloads/detail?name=wz_jsgraphics.js&can=2&q=
3. Initialize the Java Script ECG variables: (in the header)
y=new Array(....,.....,.... ); //this contain the y values (readings) we will post the example values at the end of the article.
currentPart=0; //current page is 1st page in the ECG
baseline=201; //the is the ECG recording baseline
total=0; //total number of pages
temp=y.length; //calculate the total number of pages
while(temp>0){
temp=temp-2000; //as shown in the 1st image , we will draw 4 seconds in each page (each second represented by 500 sample =2000 total sample)
total++;
}
//initiliazie the graphics object to draw in our Div (i.e. Canvas)
jg = new jsGraphics("Canvas");
//set this true if we need to allow the user to print it, it will impact performance a little.
jg.setPrintable(true);
4. Draw the initial ECG page by calling draw() method on html body onload:
<body onload="draw();">
5. Draw function code:
function draw(){
jg.setColor("black");
jg.drawString("Lead II",40,5); //this should be adjusted according to the lead number
jg.drawString("HR 80 per min",40,25); //this should be adjusted according to HR value
jg.drawString("Page "+(currentPart+1)+"/"+total,40,220); //this is the current page number
jg.setColor("blue");
var x=0;
jg.drawLine(x,y[0]+baseline,x,y[0]+baseline);
jg.setColor("blue");
var x=0;
jg.drawLine(x,y[0]+baseline,x,y[0]+baseline);
for(i=1;i<y.length;i++){
x=x+0.5;
jg.drawLine(x-1,0-y[i-1]+baseline,x,0-y[i]+baseline);
if(x==1000) { break;} //break once reach to end of the div of 4 seconds.
}
jg.paint();
return;
}
6. Next and Previous page buttons:
<img src="prev.gif" onclick="drawPrev();"/>
<img src="next.gif" onclick="drawNext();"/>
7. drawPrev() and drawNext() functions:
function drawNext(){
if(currentPart+1<total){
currentPart++;
}else{
return;
}
jg.clear(); //clear all drawings
jg.paint();
start=currentPart*2000; //this is the total samples per page (4 seconds)
var x=0;
jg.setColor("black");
jg.drawString("Lead II",40,5);
jg.drawString("HR 80 per min",40,25);
jg.drawString("Page "+(currentPart+1)+"/"+total,40,220);
jg.setColor("blue");
jg.drawLine(x,y[start]+baseline,x,y[start]+baseline);
for(i=start;i<y.length;i++){
x=x+0.5;
jg.drawLine(x-1,0-y[i-1]+baseline,x,0-y[i]+baseline);
if(x==1000) { break;}
}
jg.paint();
return;
}
function drawPrev(){
if(currentPart>0){
currentPart--;
}else{
return;
}
jg.clear(); //to clear all drawings
jg.paint();
start=currentPart*2000;
var x=0;
jg.setColor("black");
jg.drawString("Lead II",40,5);
jg.drawString("HR 80 per min",40,25);
jg.drawString("Page "+(currentPart+1)+"/"+total,40,220);
jg.setColor("blue");
jg.drawLine(x,y[start]+baseline,x,y[start]+baseline);
for(i=start;i<y.length;i++){
x=x+0.5;
jg.drawLine(x-1,0-y[i-1]+baseline,x,0-y[i]+baseline);
if(x==1000) { break;}
}
jg.paint();
return;
}
8. Y array example values:
y=new Array(12,13,18,27,38,44,44,43,46,52,57,57,53,49,48,49,50,51,54,57,59,59,57,56,55,55,55,56,57,59,59,59,59,59,59,59,58,59,59,59,60,60
Note: For more details about Graphics drawing library , check the URL:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
You can find a working example at the URL:
http://osa-ora.awardspace.co.uk/
To draw ECG we need to identify few things 1st :
1.ECG baseline used.
2.Sampling rate : no of readings per seconds.
1. We will have 1 html div component to draw the ECG inside:
<div id="Canvas" style="background-image: url(ecg_back.png); position: relative; height: 250px; width: 1000px;"></div>
2. Import the graphics library: (in the header)
<script type="text/javascript" src="wz_jsgraphics.js"></script>
You can download this library from the URL:
https://code.google.com/p/eucaly61-java/downloads/detail?name=wz_jsgraphics.js&can=2&q=
3. Initialize the Java Script ECG variables: (in the header)
y=new Array(....,.....,.... ); //this contain the y values (readings) we will post the example values at the end of the article.
currentPart=0; //current page is 1st page in the ECG
baseline=201; //the is the ECG recording baseline
total=0; //total number of pages
temp=y.length; //calculate the total number of pages
while(temp>0){
temp=temp-2000; //as shown in the 1st image , we will draw 4 seconds in each page (each second represented by 500 sample =2000 total sample)
total++;
}
//initiliazie the graphics object to draw in our Div (i.e. Canvas)
jg = new jsGraphics("Canvas");
//set this true if we need to allow the user to print it, it will impact performance a little.
jg.setPrintable(true);
4. Draw the initial ECG page by calling draw() method on html body onload:
<body onload="draw();">
5. Draw function code:
function draw(){
jg.setColor("black");
jg.drawString("Lead II",40,5); //this should be adjusted according to the lead number
jg.drawString("HR 80 per min",40,25); //this should be adjusted according to HR value
jg.drawString("Page "+(currentPart+1)+"/"+total,40,220); //this is the current page number
jg.setColor("blue");
var x=0;
jg.drawLine(x,y[0]+baseline,x,y[0]+baseline);
jg.setColor("blue");
var x=0;
jg.drawLine(x,y[0]+baseline,x,y[0]+baseline);
for(i=1;i<y.length;i++){
x=x+0.5;
jg.drawLine(x-1,0-y[i-1]+baseline,x,0-y[i]+baseline);
if(x==1000) { break;} //break once reach to end of the div of 4 seconds.
}
jg.paint();
return;
}
6. Next and Previous page buttons:
<img src="prev.gif" onclick="drawPrev();"/>
<img src="next.gif" onclick="drawNext();"/>
7. drawPrev() and drawNext() functions:
function drawNext(){
if(currentPart+1<total){
currentPart++;
}else{
return;
}
jg.clear(); //clear all drawings
jg.paint();
start=currentPart*2000; //this is the total samples per page (4 seconds)
var x=0;
jg.setColor("black");
jg.drawString("Lead II",40,5);
jg.drawString("HR 80 per min",40,25);
jg.drawString("Page "+(currentPart+1)+"/"+total,40,220);
jg.setColor("blue");
jg.drawLine(x,y[start]+baseline,x,y[start]+baseline);
for(i=start;i<y.length;i++){
x=x+0.5;
jg.drawLine(x-1,0-y[i-1]+baseline,x,0-y[i]+baseline);
if(x==1000) { break;}
}
jg.paint();
return;
}
function drawPrev(){
if(currentPart>0){
currentPart--;
}else{
return;
}
jg.clear(); //to clear all drawings
jg.paint();
start=currentPart*2000;
var x=0;
jg.setColor("black");
jg.drawString("Lead II",40,5);
jg.drawString("HR 80 per min",40,25);
jg.drawString("Page "+(currentPart+1)+"/"+total,40,220);
jg.setColor("blue");
jg.drawLine(x,y[start]+baseline,x,y[start]+baseline);
for(i=start;i<y.length;i++){
x=x+0.5;
jg.drawLine(x-1,0-y[i-1]+baseline,x,0-y[i]+baseline);
if(x==1000) { break;}
}
jg.paint();
return;
}
8. Y array example values:
y=new Array(12,13,18,27,38,44,44,43,46,52,57,57,53,49,48,49,50,51,54,57,59,59,57,56,55,55,55,56,57,59,59,59,59,59,59,59,58,59,59,59,60,60
,61,61,61,61,61,61,61,61,62,63,63,63,63,63,64,65,66,66,65,65,65,65,65,66,66,66,66,66,66,66,67,69,70,71,71,70,69,69,68,69,70,71,72,73
,73,73,74,75,76,76,77,78,79,79,79,79,79,80,81,82,82,83,85,86,88,89,89,89,89,89,89,89,89,90,90,91,92,93,93,92,90,87,84,82,79,77,74
,72,70,69,67,67,66,66,65,63,62,61,60,59,58,57,56,56,56,56,56,56,56,55,55,56,56,56,56,56,56,57,57,57,56,56,56,56,55,55,55,55,56,56,55
,55,55,55,55,55,54,54,54,55,56,57,58,58,58,58,56,55,55,54,54,53,53,54,54,55,56,58,59,59,58,56,55,55,55,56,56,56,56,57,57,57,57,57,57
,57,57,57,57,57,57,57,58,58,58,58,58,58,58,57,57,58,59,60,59,58,58,57,57,57,57,58,58,58,58,59,60,61,61,61,62,62,61,61,60,61,61,62,63
,63,63,64,64,64,64,64,64,63,62,62,62,62,62,62,62,62,63,63,62,61,60,60,60,59,58,57,56,56,56,56,57,57,57,57,57,57,57,57,56,56,56,56,56
,57,57,57,57,56,56,56,56,56,57,57,58,57,57,56,56,55,54,52,49,47,45,44,45,48,52,58,66,75,86,99,111,121,127,129,126,119,108,94,79,66,57
,51,46,43,42,44,49,54,58,59,58,57,56,55,56,57,59,61,62,62,61,60,59,58,57,57,57,59,61,62,63,62,62,62,62,62,62,62,62,62,63,64,64,64,64,
64,64,65,65,66,67,68,69,69,68,67,66,66,66,67,67,67,67,68,69,71,73,74,74,73,71,70,69,70,70,71,70,70,70,71,72,74,75,76,76,76,77,77
,77,77,78,80,81,82,82,82,83,84,85,85,86,87,88,89,91,91,91,92,92,93,93,94,94,95,95,94,94,93,92,90,89,87,86,85,82,79,76,74,73,72,71,69
,67,65,64,64,63,63,62,62,62,60,59,58,57,57,57);Note: For more details about Graphics drawing library , check the URL:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
You can find a working example at the URL:
http://osa-ora.awardspace.co.uk/
Osama
ReplyDeleteThe link appears to be broken- please verify the link http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
or post the lib in another location
I send the library to you, seems the server is no longer used to host it, sorry for that i will try to add another link for it.
ReplyDeleteI can't draw using wz_jsgraphics.js, my page remains blank, and I tried the simplest example of all, just to draw a rectangle. Am I missing something? I'm using firefox 5.0
ReplyDeletesend you code so i can have a look on what is wrong.. mostly you need to place jg.paint();
ReplyDeletecould u send the js to mukeshsingh.chauhan@gmail.com
ReplyDeletesent to that email, thanks.
ReplyDeleteHi,
ReplyDeleteyour application seems to be very useful for me. I am a beginner in java. I have got a project similar to yours. But I need to work it out with Java Swing. Or else we can even use any available native code. Please let me know your valuable suggestions.
It is much more easier to do it in Java (Swing or others) in compare to Java Script, so go ahead and do it.
ReplyDeletecan you please guide me with any sample code?
ReplyDeleteYou need to follow same steps but draw on a JPanel the background , then draw the points using the data over the JPanel after getting its Graphic component.
ReplyDeleteCan you send me the library to me as well. rasit dot eskicioglu AT gmail dot com
ReplyDeleteSent.
Deletehi i am also in a certain health project so can u send the code and library to me also at bishu1988.diatm@gmail.com..........side wise can i get this done in sencha also????
ReplyDeletewhat do you mean by sencha ?
DeleteReally great, you are saving lot of people's time.
ReplyDeleteHi can you please send me the library link
ReplyDeleteThanks !!
No need, you can now implement this easily with HTML 5.
DeleteHi, Mr Osama, Thank you , nice tutorial, what is the baseline?
ReplyDeleteIn my data set we get 256 value in 1 second. so will increment the draw by 0.9765625 for each sample (250/256 = 0.9765625)
You used 201 for baseline, is it correct for any sample rate?
Thank you.
Baseline means where the base should be drawn, it is typically 2 boxes from below.
DeleteThe sampling rate is related to the horizontal drawing not the vertical one so you can use the same baseline.
Thank you very much Osama, Nice work.
DeleteFantastic work Mr.Osama.. would be really helpful in one of our current projects.. can you please send me the sample code to dennis.david@signifiq.in
ReplyDeleteThis is very old approach, you can use HTML 5 canvas draw functions to achieve the same in good performance.
DeleteI can't find wz_jsgraphics.js library can you Refresh download link ??
ReplyDeletePlease use the HTML 5 canvas instead of it.
Deletedo you have this examples with html 5 canvas? thanklss
ReplyDeletenot in hand at the moment, all you need to do is to covert the drawing code into canvas drawings.
Deletei am getting error in methods in this graphics library can u plz send the sample code on lalitsaini311296@gmail.com
ReplyDeleteHow can I find the link of library bro ?
ReplyDeleteHi can you pls share src="wz_jsgraphics.js to meena.aspirehr@gmail.com thanks
ReplyDeleteCan you. Pls share ssmple code n src="wz_jsgraphics.js to meena.aspirehr@gmail.com thanks
ReplyDeleteYou don't need it as you can draw on HTML5 canvas directly, anyway I shared with you over email.
Delete