Saturday, March 27, 2010

Draw ECG Using Java Script Draw Functions


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
,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/



31 comments:

  1. Osama
    The link appears to be broken- please verify the link http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
    or post the lib in another location

    ReplyDelete
  2. 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.

    ReplyDelete
  3. I 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

    ReplyDelete
  4. send you code so i can have a look on what is wrong.. mostly you need to place jg.paint();

    ReplyDelete
  5. could u send the js to mukeshsingh.chauhan@gmail.com

    ReplyDelete
  6. Hi,
    your 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.

    ReplyDelete
  7. It is much more easier to do it in Java (Swing or others) in compare to Java Script, so go ahead and do it.

    ReplyDelete
  8. can you please guide me with any sample code?

    ReplyDelete
  9. You 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.

    ReplyDelete
  10. Can you send me the library to me as well. rasit dot eskicioglu AT gmail dot com

    ReplyDelete
  11. hi 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????

    ReplyDelete
  12. Really great, you are saving lot of people's time.

    ReplyDelete
  13. Hi can you please send me the library link
    Thanks !!

    ReplyDelete
    Replies
    1. No need, you can now implement this easily with HTML 5.

      Delete
  14. Hi, Mr Osama, Thank you , nice tutorial, what is the baseline?
    In 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.

    ReplyDelete
    Replies
    1. Baseline means where the base should be drawn, it is typically 2 boxes from below.
      The sampling rate is related to the horizontal drawing not the vertical one so you can use the same baseline.

      Delete
    2. Thank you very much Osama, Nice work.

      Delete
  15. Fantastic 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

    ReplyDelete
    Replies
    1. This is very old approach, you can use HTML 5 canvas draw functions to achieve the same in good performance.

      Delete
  16. I can't find wz_jsgraphics.js library can you Refresh download link ??

    ReplyDelete
  17. do you have this examples with html 5 canvas? thanklss

    ReplyDelete
    Replies
    1. not in hand at the moment, all you need to do is to covert the drawing code into canvas drawings.

      Delete
  18. i am getting error in methods in this graphics library can u plz send the sample code on lalitsaini311296@gmail.com

    ReplyDelete
  19. How can I find the link of library bro ?

    ReplyDelete
  20. Hi can you pls share src="wz_jsgraphics.js to meena.aspirehr@gmail.com thanks

    ReplyDelete
  21. Can you. Pls share ssmple code n src="wz_jsgraphics.js to meena.aspirehr@gmail.com thanks

    ReplyDelete
    Replies
    1. You don't need it as you can draw on HTML5 canvas directly, anyway I shared with you over email.

      Delete