# Scrolling Graph

**URL:** https://discourse.processing.org/t/scrolling-graph/27168
**Category:** Electronics (Arduino, etc.)
**Created:** [January 18, 2021, 6:45pm UTC](https://discourse.processing.org/t/scrolling-graph/27168 "2021-01-18T18:45:17Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![saaqib.m](https://avatars.discourse-cdn.com/v4/letter/s/ee7513/32.png) [@saaqib.m](https://discourse.processing.org/u/saaqib.m)
#### Post date: [January 18, 2021, 6:45pm UTC](https://discourse.processing.org/t/scrolling-graph/27168/1 "2021-01-18T18:45:17Z")

</div>

Hi, I am trying to plot the values coming in from the serial port into a scrolling graph. Right now it it displaying some value but not what I want. It should plot every time ReadStringUntill gets to a new line etc. Any ideas are welcome thanks:

````auto
import processing.serial.*;

Serial port; // Create object from Serial class
int val; // Data received from the serial port
int[] values;
float zoom;
int inByte;
void setup() 
{
  size(1280, 480);
  // Open the port that the board is connected to and use the same speed (9600 bps)
  port = new Serial(this, Serial.list()[0], 9600);
  port.bufferUntil('\n'); // Sets a specific byte to buffer until before calling serialEvent()

  values = new int[width];
  zoom = 1.0f;
  smooth();
}

int getY(int val) {
  return (int)(height - val / 1023.0f * (height - 1));
}

int getValue() { // This is my myPort.bufferuntil?
  int value = -1;
  String inString = port.readStringUntil('\n');
  inString = trim(inString);
  value = int(inString);
  //value = port.read();
  //println(value);
  //if (inString != null) {
  // inString = trim(inString); // trim off whitespaces.
  // value = int(inString); 
  //}
  //while (port.available() >= 1) {
    
  // if (port.read() == 0xff) {
  // value = (port.read());
  // }
  //}
  return value;
}

void pushValue(int value) {
  for (int i=0; i<width-1; i++)
    values[i] = values[i+1];
  values[width-1] = value;
}

void drawLines() {
  stroke(255);
  int displayWidth = (int) (width / zoom);
  int k = values.length - displayWidth;
  int x0 = 0;
  int y0 = getY(values[k]);
  for (int i=1; i<displayWidth; i++) {
    k++;
    int x1 = (int) (i * (width-1) / (displayWidth-1));
    int y1 = getY(values[k]);
    line(x0, y0, x1, y1);
    x0 = x1;
    y0 = y1;
  }
}

void draw()
{
  background(0);
  //drawGrid();
  val = getValue();
  if (val != -1) {
    pushValue(val);
  }
  drawLines();
}```
````

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [January 18, 2021, 6:50pm UTC](https://discourse.processing.org/t/scrolling-graph/27168/2 "2021-01-18T18:50:51Z")

</div>

Hello,

You are duplicate posting!

Please delete this one.