# How to label live graph visualizer

**URL:** <https://discourse.processing.org/t/how-to-label-live-graph-visualizer/11982>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [June 10, 2019, 10:52pm UTC](https://discourse.processing.org/t/how-to-label-live-graph-visualizer/11982 "2019-06-10T22:52:55Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![osibada](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/osibada/32/5574_2.png) [@osibada](https://discourse.processing.org/u/osibada)\
**Post date:** [June 10, 2019, 10:52pm UTC](https://discourse.processing.org/t/how-to-label-live-graph-visualizer/11982/1 "2019-06-10T22:52:55Z")

</div>

Hi,

I have found a live Blood Pressure and Pulse Pressure visualiser that works with my PPG sensor but the current graph screen doesn’t show the labels for the vertical and horizontal axis. **I’d like to have these labelled all the time as any basic graph.**

I need to label the left vertical side of the bigger white square as “BP (mmHg)” and label it from 60 to 130 mmHg similarly to the table shown below. As well its horizontal axis where I only need it to show “Time(s)”

How do you set these in the background or wherever it’s meant to be set? Thanks!

 ![table%20ideal%20axis](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/57fcfaf269baca01261519afc9f384db2af728aa.jpeg)

**CURRENT CODE:**

import processing.serial.\*; // serial library lets us talk to Arduino  
PFont font;  
PFont portsFont;  
Scrollbar scaleBar;

Serial port;

int Sensor; // HOLDS PULSE SENSOR DATA FROM ARDUINO  
int IBI; // HOLDS TIME BETWEN HEARTBEATS FROM ARDUINO  
int BPM; // HOLDS HEART RATE VALUE FROM ARDUINO  
int[] RawY; // HOLDS HEARTBEAT WAVEFORM DATA BEFORE SCALING  
int[] ScaledY; // USED TO POSITION SCALED HEARTBEAT WAVEFORM  
int[] rate; // USED TO POSITION BPM DATA WAVEFORM  
float zoom; // USED WHEN SCALING PULSE WAVEFORM TO PULSE WINDOW  
float offset; // USED WHEN SCALING PULSE WAVEFORM TO PULSE WINDOW  
color eggshell = color(255, 253, 248);  
int heart = 0; // This variable times the heart image ‘pulse’ on screen

// THESE VARIABLES DETERMINE THE SIZE OF THE DATA WINDOWS  
int PulseWindowWidth = 490;  
int PulseWindowHeight = 512;  
int BPMWindowWidth = 180;  
int BPMWindowHeight = 340;  
boolean beat = false; // set when a heart beat is detected, then cleared when the BPM graph is advanced

void setup() {  
size(700, 600); // Stage size  
frameRate(100);  
font = loadFont(“Arial-BoldMT-24.vlw”);  
textFont(font);  
textAlign(CENTER);  
rectMode(CENTER);  
ellipseMode(CENTER);  
// Scrollbar constructor inputs: x,y,width,height,minVal,maxVal  
scaleBar = new Scrollbar (400, 575, 180, 12, 0.5, 1.0); // set parameters for the scale bar  
RawY = new int[PulseWindowWidth]; // initialize raw pulse waveform array  
ScaledY = new int[PulseWindowWidth]; // initialize scaled pulse waveform array  
rate = new int [BPMWindowWidth]; // initialize BPM waveform array  
zoom = 0.75; // initialize scale of heartbeat window

// set the visualizer lines to 0  
resetDataTraces();

background(0);  
// DRAW OUT THE PULSE WINDOW AND BPM WINDOW RECTANGLES  
drawDataWindows();  
drawHeart();

// GO FIND THE ARDUINO  
fill(eggshell);  
text(“Select Your Serial Port”,245,30);  
listAvailablePorts();

}

void draw() {  
if(serialPortFound){  
// ONLY RUN THE VISUALIZER AFTER THE PORT IS CONNECTED  
background(0);  
noStroke();  
drawDataWindows();  
drawPulseWaveform();  
drawBPMwaveform();  
drawHeart();  
// PRINT THE DATA AND VARIABLE VALUES  
fill(eggshell); // get ready to print text  
text(“E-lobe Live Visualizer”,245,30); // tell them what you are  
text("PP " + IBI + “mmHg”,600,585); // print the PP in mmHg  
text(BPM + “BPM”,600,200); // print the Milimiters of Mercury  
text("Pulse Window Scale " + nf(zoom,1,2), 150, 585); // show the current scale of Pulse Window

// DO THE SCROLLBAR THINGS  
scaleBar.update (mouseX, mouseY);  
scaleBar.display();

} else { // SCAN BUTTONS TO FIND THE SERIAL PORT

autoScanPorts();

if(refreshPorts){  
refreshPorts = false;  
drawDataWindows();  
drawHeart();  
listAvailablePorts();  
}

for(int i=0; i\<numPorts+1; i++){  
button[i].overRadio(mouseX,mouseY);  
button[i].displayRadio();  
}

}

} //end of draw loop

void drawDataWindows(){  
// DRAW OUT THE PULSE WINDOW AND BPM WINDOW RECTANGLES  
noStroke();  
fill(eggshell); // color for the window background  
rect(255,height/2,PulseWindowWidth,PulseWindowHeight);  
rect(600,385,BPMWindowWidth,BPMWindowHeight);  
}

void drawPulseWaveform(){  
// DRAW THE PULSE WAVEFORM  
// prepare pulse data points  
RawY[RawY.length-1] = (1023 - Sensor) - 212; // place the new raw datapoint at the end of the array  
zoom = scaleBar.getPos(); // get current waveform scale value  
offset = map(zoom,0.5,1,150,0); // calculate the offset needed at this scale  
for (int i = 0; i \< RawY.length-1; i++) { // move the pulse waveform by  
RawY[i] = RawY[i+1]; // shifting all raw datapoints one pixel left  
float dummy = RawY[i] \* zoom + offset; // adjust the raw data to the selected scale  
ScaledY[i] = constrain(int(dummy),44,556); // transfer the raw data array to the scaled array  
}  
stroke(250,0,0); // red is a good color for the pulse waveform  
noFill();  
beginShape(); // using beginShape() renders fast  
for (int x = 1; x \< ScaledY.length-1; x++) {  
vertex(x+10, ScaledY[x]); //draw a line connecting the data points  
}  
endShape();  
}

void drawBPMwaveform(){  
// DRAW THE BPM WAVE FORM  
// first, shift the BPM waveform over to fit then next data point only when a beat is found  
if (beat == true){ // move the heart rate line over one pixel every time the heart beats  
beat = false; // clear beat flag (beat flag waset in serialEvent tab)  
for (int i=0; i\<rate.length-1; i++){  
rate[i] = rate[i+1]; // shift the bpm Y coordinates over one pixel to the left  
}  
// then limit and scale the BPM value  
BPM = min(BPM,200); // limit the highest BPM value to 200  
float dummy = map(BPM,0,200,555,215); // map it to the heart rate window Y  
rate[rate.length-1] = int(dummy); // set the rightmost pixel to the new data point value  
}  
// GRAPH THE HEART RATE WAVEFORM  
stroke(250,0,0); // color of heart rate graph  
strokeWeight(2); // thicker line is easier to read  
noFill();  
beginShape();  
for (int i=0; i \< rate.length-1; i++){ // variable ‘i’ will take the place of pixel x position  
vertex(i+510, rate[i]); // display history of heart rate datapoints  
}  
endShape();  
}

void resetDataTraces(){  
for (int i=0; i\<rate.length; i++){  
rate[i] = 555; // Place BPM graph line at bottom of BPM Window  
}  
for (int i=0; i\<RawY.length; i++){  
RawY[i] = height/2; // initialize the pulse window data line to V/2  
}  
}