# Labelling a Real Time Graph in Processing

**URL:** <https://discourse.processing.org/t/labelling-a-real-time-graph-in-processing/25966>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [December 4, 2020, 9:02pm UTC](https://discourse.processing.org/t/labelling-a-real-time-graph-in-processing/25966 "2020-12-04T21:02:19Z")\
**Posts on this page:** 4\
**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:** [December 4, 2020, 9:02pm UTC](https://discourse.processing.org/t/labelling-a-real-time-graph-in-processing/25966/1 "2020-12-04T21:02:19Z")

</div>

Hi,  
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 :  
myPort.bufferUntil(’\n’);  
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:
  xPos++;
}

```

newData =false;  
}  
}

void serialEvent (Serial myPort) {  
// get the ASCII string:  
inString = myPort.readStringUntil(’\n’);  
println(inString);  
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

---

<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:** [December 5, 2020, 10:10pm UTC](https://discourse.processing.org/t/labelling-a-real-time-graph-in-processing/25966/2 "2020-12-05T22:10:26Z")

</div>

Hello,

When posting code in the forum please format:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

> [@saaqib.m](#):
>
> I have the following code

Source of code is:

> **[Create a Graph with Processing | Arduino Documentation](https://docs.arduino.cc/built-in-examples/communication/Graph)**
>
> Send data to the computer and graph it in Processing.

There are resources (references, examples, tutuorial, etc.) here at [Processing.org](http://Processing.org).

Look in the reference for:

- line()
- text()

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

`:)`

---

<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:** [December 5, 2020, 10:30pm UTC](https://discourse.processing.org/t/labelling-a-real-time-graph-in-processing/25966/3 "2020-12-05T22:30:45Z")

</div>

Hi there!

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

---

<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:** [December 5, 2020, 10:52pm UTC](https://discourse.processing.org/t/labelling-a-real-time-graph-in-processing/25966/4 "2020-12-05T22:52:44Z")

</div>

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

Many thanks