Im trying to create a accelerometer graph. I have created a graph below.

1. // screen size
   float wWidth = 600;
   float wHeight = 600;
   
   int edgeIndent = 20;
   int dBetweenGraph = 20;
   int gHeight = int((wHeight-4*dBetweenGraph-2*edgeIndent)/3);
   int gWidth = int((wWidth-2*dBetweenGraph-2*edgeIndent));
   
   void setup(){
     size(int(wWidth),int(wHeight));
     fill(128);
     rect(edgeIndent,edgeIndent,int(wWidth-edgeIndent*2),int(wHeight-edgeIndent*2));
     fill(0);
     textAlign(CENTER);
     text("Accelerometer Data",wWidth/2,edgeIndent-5);
     pushMatrix();
     translate(edgeIndent-5, wHeight/2);
     rotate(radians(-90));
     text("X-axis Data",gHeight,0);
     text("Y-axis Data",0,0);
     text("Z-axis Data",-gHeight,0);
     popMatrix();
    
     drawRect(wWidth/2,(wHeight/2-gHeight-dBetweenGraph),gWidth,gHeight);
     drawRect(wWidth/2,wHeight/2,gWidth,gHeight);
     drawRect(wWidth/2,(wHeight/2+gHeight+dBetweenGraph),gWidth,gHeight);
   }
   
   void drawRect(float x, float y, int xWidth, int yHeight){
     print(xWidth);
     int wHashTag = 10;
     int yHashTag = 30;
     stroke(0);
     fill(255);
     rect (x-xWidth/2,y-yHeight/2,xWidth,yHeight);
    
     int nOfHashes = (yHashTag*(yHeight/2/yHashTag));
     for (int j = -nOfHashes; j < nOfHashes+1; j = j+yHashTag) {
       stroke(225);
       line(1+x-xWidth/2, y+j, -1+x+xWidth/2, y+j);
       stroke(0);
       textAlign(RIGHT);
       PFont font;
       font = loadFont("ArialNarrow-14.vlw");
       textFont(font, 14);
       text(j*-1, edgeIndent+dBetweenGraph-2, y+j);
     }
    
     for (int i=xWidth+dBetweenGraph+edgeIndent-30; i>31; i=i-30){
      
       stroke(225);
       line (i,+1+y-yHeight/2,i,y-yHeight/2+wHashTag);
       line (i,y-wHashTag,i,y+wHashTag);
       line (i,-1+y+yHeight/2,i,y+yHeight/2-wHashTag);
       textAlign(CENTER);
       int toPrint = (i*-1)+xWidth+wHashTag;
       if((toPrint%60)==0){
         text(toPrint,i+30,+15+y+yHeight/2);
         //println(i);
       }
     }
   }
   Which looks good.

Then I have this code

1. import processing.serial.*;
   
   Serial myPort;
   int graphLength=300;
   int valueX=0;
   int valueY=0;
   int valueZ=0;
   int lf = 10;
   String stringToChange="";
   int[] valueXs = new int[graphLength];
   int[] valueYs = new int[graphLength];
   int[] valueZs = new int[graphLength];
   
   void setup(){
     size(graphLength,700);
     String portName = Serial.list()[0];
     myPort = new Serial(this, portName, 9600);
     myPort.bufferUntil('\n');
   }
   
   
   
   void draw(){
   }
   
   void serialEvent(Serial myPort){
     stringToChange = myPort.readStringUntil('\n');
     if (stringToChange != null) {
       //println(stringToChange);
      
       String [] data = split(stringToChange,'\t');
       delay(000);
       valueX = int(data[0].trim());
       valueY = int(data[1].trim());
       valueZ = int(data[2].trim());
         //println(valueX);
       }
     background(255);
     strokeWeight(1);
    
     beginShape();
     stroke(255,0,0);
     for(int i = 0; i<valueXs.length;i++){
       vertex(i,valueXs[i]+200);
     }
     endShape();
     beginShape();
     stroke(0,255,0);
     for(int i = 0; i<valueYs.length;i++){
       vertex(i,valueYs[i]+400);
     }
     endShape();
     beginShape();
     stroke(0,0,255);
     for(int i = 0; i<valueZs.length;i++){
       vertex(i,valueZs[i]+600);
     }
     endShape();
    
     for(int i = 1; i<valueXs.length;i++){
         valueXs[i-1] = valueXs[i];
         valueYs[i-1] = valueYs[i];
         valueZs[i-1] = valueZs[i];
       }
       valueXs[valueXs.length-1]=valueX;
       valueYs[valueYs.length-1]=valueY;
       valueZs[valueZs.length-1]=valueZ;
   }

which creates the graphing.


My question really is every time I add the graphing code to the first it doesnt show any graphing. I tried a few different ways and it seems that possibly that it blanks out the graph that I create and then tries to graph.
I know when I created the graph I had to worry about the order of when the rects and the line were drawn. I thought if I create the graph then add the code and the correct positioning I could just draw it on top.

Any Ideas appreciated. I will post later if I get any better information
also if this is not in the correct forum area please move.
Thanks Ken