While xvals, yvals and bvals store int values; vals, which is a PVector, have float fields instead!

    point(i, height/3 + yvals[i]/3);
    point(i, height/3 + vals[i].y/3);//*******ADDED

At the excerpt above, since both yvals[i] and 3 are int, the division result is truncated to int as well.
And about vals[i].y and 3, since at least the field y is a float, it results in an expected normal division.

So, if you wanna mirror the division results from those int[] arrays,
you have to use cast operator ( int) in front of vals[] for each division occurrence!

But my real advice would be to make your own class to replace PVector;
since apparently you only use it as a means to store values,
rather than using any of the nice features of it!

Doing so, you can choose the field types to be of int or anything else!  

It didn't work! I tried to change the line:

Well, have you thought about switching PVector for a homemade class to replace your xval, yval & bval arrays?
Since those variables are of type int and a PVector has float fields,
it's safer to have a class w/ int fields instead!
Here's a prototype of a class which just stores and retrieves 3 int fields:

class myVals {
  int x, y, z;

  myVals() {
  }

  myVals(int val) {
    x = y = z = val;
  }

  myVals(int xx, int yy) {
    setVals(xx, yy);
  }

  myVals(int xx, int yy, int zz) {
    setVals(xx, yy, zz);
  }

  myVals(int[] vals) {
    setVals(vals);
  }

  void setVals(int val) {
    x = y = z = val;
  }

  void setVals(int xx, int yy) {
    x = xx;
    y = yy;
  }

  void setVals(int xx, int yy, int zz) {
    x = xx;
    y = yy;
    z = zz;
  }

  void setVals(int[] vals) {
    x = vals[0];
    y = vals[1];
    z = vals[2];
  }

  int[] getVals() {
    int[] vals = new int[3];

    vals[0] = x;
    vals[1] = y;
    vals[2] = z;

    return vals;
  }

  void zeroVals() {
    x = y = z = 0;
  }
}

Oh, that example above got much bigger than I thought!
Here's a mini version of it. And works as good as the bigger one, but w/o any fancy setter/getter methods 

class myVals {
  int x, y, z;
}

Using ArrayLists of PVectors might be good. Something like this:

ArrayList<PVector> vals;

void setup() {
  size(640,360);
  vals = new ArrayList<PVector>();
//  set up an ArrayList to store mouse coords as PVectors
}

void draw() {
  background(204);
  vals.add(new PVector(mouseX, mouseY));
  if(vals.size() == width) vals.remove(0);
//  add mouse coord
//  if there are more than width coords, remove the oldest
  
  float xx = 0;
  ArrayList<PVector> xdisp = new ArrayList<PVector>();
  ArrayList<PVector> ydisp = new ArrayList<PVector>();
  for(PVector cur : vals) {
    xdisp.add(
      new PVector(xx, (cur.x/width)*height*.5));
    ydisp.add(
      new PVector(xx, (cur.y/height)*height*.5+height*.5));
    xx++;
  }
//  transform the mouse coords into display coords and
//  store in seperate ArrayLists of PVectors for x and y display
  
  drawLine(xdisp);
  drawLine(ydisp);
//  pass each display ArrayList to this method to draw the lines
}

void drawLine(ArrayList<PVector> in) {
  PVector prev = null;  
  for(PVector cur : in) {
    if(prev == null) {
      prev = cur;
      continue;
    }
    line(prev.x, prev.y, cur.x, cur.y);
    prev = cur;
  }
}

Thanks for the options guys! Still don't know why my first code is failing. I decided to work with: