Labelling a Real Time Graph in Processing

I wanted to know how I could create a real time moving graph (or a graph that resets to 0 after reaching the end) AND be able to label the axes as well. I cannot seem to do this. I have the following code which provides for me a simple graph but without axes:

import processing.serial.;
import grafica.

Serial myPort; // The serial port - object from serial class
float inByte; // Incoming serial data
boolean newData = false;
int xPos = 1; // horizontal position of the graph
String inString; // Data recieved from serial port
//Variables to draw a continuous line.
int lastxPos=1;
int lastheight=0;

void setup () {
// set the window size:
size(500, 500);
myPort = new Serial(this, “COM4”, 9600);
// A serialEvent() is generated when a newline character is received :
background(0); // set inital background:

void draw () {
if (newData) {
//Drawing a line from Last inByte to the new one.
stroke(127,34,255); //stroke color
strokeWeight(4); //stroke wider
line(lastxPos, lastheight, xPos, height - inByte);
lastxPos= xPos;
lastheight= int(height-inByte);

// at the edge of the window, go back to the beginning:
if (xPos >= width) {
  xPos = 0;
  lastxPos= 0;
  background(0);  //Clear the screen.
else {
  // increment the horizontal position:

newData =false;

void serialEvent (Serial myPort) {
// get the ASCII string:
inString = myPort.readStringUntil(’\n’);
if (inString != null) {
inString = trim(inString); // trim off whitespaces.
inByte = float(inString); // convert to a number.
inByte = map(inByte, 0, 1023, 0, height); //map to the screen height.
newData = true;
Feel free to tell me how I could label my axis and add a title here!

Alternatively I tried using the library grafica, but i could not display a real time graph AND a labelled axis.

Please if anyone could help out that would be great! Thanks


When posting code in the forum please format:

Source of code is:

There are resources (references, examples, tutuorial, etc.) here at

Look in the reference for:

  • line()
  • text()

I would update the axis after each background(0) in your code.


Hi there!

Thank you very much for your reply.
Do you know how I could update the axis every time?

Also, the graph starts off from (0,0), but obviously I need space for the axis, how can I do this?

Many thanks