Please Help, Plotting a scrolling Graph


i want to change the distance of each update. because each step is too close to each other. which line should I change to influance it?


as i argue already i advice against it,
but you can as a first step change



k +=2;


allright, i tried that. but now I have the problem that it isn’t a nice graph anymore. you can see that background between each update. it is moving faster tho.


i know, read again my post, i talk about
lines between old points and new points
or more easy rectangles for the new points!
but add you must get the background cleaned up too.

add not forget some more jobs i mentioned already,
make header text , realtime value and unit
like you see in my greenish graph picture above

how about change the 2000 and 500 msec delay in arduino?

and think about a complete new design:

store the records to array, min long for ONE DAY

and do not a running graph instead a real user (time) scalable
line graph


Hi there, needed to create a new account because I couldn’t reply anymore.
Everything worked fine! thank you a lot.
There is just 1 new thing i need your help with, ( if you know how to fix it )

I want to add the numbers above each graph. But every new phase it overwrites the old number. if I add background(200,200,0); at the end / start of the loop it overwrites the graph also. So my question is; can i clear the number every time without clearing the whole graph ?

behind the ‘’ temperatuur, luchtvochtigheid and luchtdruk" i want to add the value that keeps updating.
this is the last thing i need !!


as u can see on the prtscreen the value’s keep overlapping eachother.


plz help the posts underneath if you want :smiling_face_with_three_hearts:


yes, that is clear, we do a running graph ( not clear screen || draw + background )

so you need to make a small rectangle ( to clear the old number ) and then the text
and for that need to change the fill color also 2 times

    text(nf(map(val[i],0,100,0,valunit[i]),1,1)+" "+units[i],width-95,15+i*dy0);

and with using rect ( 10pix wide ) for each reading could look like

and with lines between last ( need memory variable ) and new point

String[] list = new String[3];
String[] head =  {" measure 1 "," measure 2 "," measure 3 "};
String[] units = {"m","cc","kg"};
float[] valunit = {20,600,100};  // high range in engineering units

int k = 5, dk=10;
int y0=120, dy0=120;
float[] val = new float[3];
float[] valold = new float[3];

void setup() {
  size(800, 380);
  background(0, 200, 200);
  for (int i = 0; i<3; i++) text(head[i],width/2,18+i*dy0);

void draw() {  // if new data from arduino Ain raw as string: ( here simulated values )
  list[0] = str(400+200*sin(TWO_PI*k/100));//"1000";
  list[1] = str(random(180, 200));
  list[2] = str(random(500, 524));
  for (int i = 0; i<3; i++) {
    val[i] = map(int(list[i]), 0, 1023, 0, 100);

    text(nf(map(val[i],0,100,0,valunit[i]),1,1)+" "+units[i],width-95,15+i*dy0);
    // clearing black rect
    fill(0, 0, 0);
    // measuring val
    stroke(0, 200, 0);
    fill(0, 200, 0);
    //  line(k,y0+i*dy0,k,y0+i*dy0-val[i]);
//    point(k, y0+i*dy0-val[i]);               // PV plot as DOT
//    rect(k-dk,y0+i*dy0,dk,-val[i]);          // PV as rect
    fill(0, 0, 0);
//    line(k+1, y0+i*dy0, k+1, y0+i*dy0-100);  // to clear to black
    // curcor line
    stroke(0, 200, 200);
    line(k+1, y0+i*dy0, k+1, y0+i*dy0-100);  // to indicate cursor

  k += dk;
  if ( k> width-5 ) k=5;


add little bit industrial engineering view:

lets say your arduino with 10bit AD
gives 0 … 1023 ( that are also steps / resolution. )
if that would be your PLC Progammable Logic Controller
and not only collect data, also does something with it ( like PID control )
it internally would work with converting 1023 to 100.0 float %
a PLC would never know that that value means 200 … 1400 Gallons/squarefoot
( would be heavy raining HA? )
if a Visualization is required ( like your PC running Processing )
linked by USB … ethernet modbus fieldbus
to the PLC (Arduino)
the data transport also would be in 1023 or 100.0 range
( but actually connected with a measuring point code /
the 1023,1023,1023 CSV line is easy and fast, but easly gives mistakes

only the Visualization knows the real TAG name “temperature”
but even that is confusing ?inside?outside?.. industrial naming like
“TR 14-09” temperatur recorder area 14 measurement 9
added a description “Temp vessel V14-02 top”
and the required low and high range
( 0 … 1023 ) means 0 … 100 ? what ?
yes add you need a UNIT
“deg C”
i hoped that helped little bit,
mostly to understand why you need to change that line in your Arduino code

int waarde1 = pressure;
int waarde2 = h;
int waarde3 = t;