# Plotting a scrolling Graph

**URL:** <https://discourse.processing.org/t/plotting-a-scrolling-graph/5219>\
**Category:** Electronics (Arduino, etc.)\
**Tags:** homework\
**Created:** [November 5, 2018, 9:41am UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219 "2018-11-05T09:41:37Z")\
**Posts on this page:** 9\
**Page:** 2

<div class="post-metadata">

**Author:** ![romek](https://avatars.discourse-cdn.com/v4/letter/r/b4bc9f/32.png) [@romek](https://discourse.processing.org/u/romek)\
**Post date:** [November 6, 2018, 2:05pm UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219/21 "2018-11-06T14:05:12Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 6, 2018, 2:07pm UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219/22 "2018-11-06T14:07:27Z")

</div>

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

> k++;

to

> k +=2;

---

<div class="post-metadata">

**Author:** ![romek](https://avatars.discourse-cdn.com/v4/letter/r/b4bc9f/32.png) [@romek](https://discourse.processing.org/u/romek)\
**Post date:** [November 6, 2018, 2:08pm UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219/23 "2018-11-06T14:08:42Z")

</div>

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.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bbb13dbdbfa2e228cb7d9e89c0edd17490ff581f.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 6, 2018, 2:12pm UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219/24 "2018-11-06T14:12:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![romek12](https://avatars.discourse-cdn.com/v4/letter/r/4491bb/32.png) [@romek12](https://discourse.processing.org/u/romek12)\
**Post date:** [November 6, 2018, 2:50pm UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219/25 "2018-11-06T14:50:34Z")

</div>

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 !!  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/42fad7a08beb56935b84e3aa63d8494be3d7e7d2.png)

---

<div class="post-metadata">

**Author:** ![romek12](https://avatars.discourse-cdn.com/v4/letter/r/4491bb/32.png) [@romek12](https://discourse.processing.org/u/romek12)\
**Post date:** [November 6, 2018, 2:54pm UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219/26 "2018-11-06T14:54:16Z")

</div>

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/306b8473b8ee6f5f75198c0f2a151eedbf3caa02.png)

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

---

<div class="post-metadata">

**Author:** ![romek12](https://avatars.discourse-cdn.com/v4/letter/r/4491bb/32.png) [@romek12](https://discourse.processing.org/u/romek12)\
**Post date:** [November 6, 2018, 2:54pm UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219/27 "2018-11-06T14:54:58Z")

</div>

plz help the posts underneath if you want 🥰

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 6, 2018, 3:40pm UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219/28 "2018-11-06T15:40:10Z")

</div>

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

```auto
    fill(255);
    rect(width-100,2+i*dy0,96,16);
    fill(0);
    textSize(12);
    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

 ![snap-071](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/ae29171033b6c0c2ef7ddb243f97709318745ec1.jpeg)

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

 ![snap-072](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f5a82f3a3035857070ad58c29b698dc13d1882d8.jpeg)

```auto
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);
  //frameRate(5);
  background(0, 200, 200);
  fill(0);
  textSize(15);
  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);

    fill(255);
    rect(width-100,2+i*dy0,96,16);
    fill(0);
    textSize(12);
    text(nf(map(val[i],0,100,0,valunit[i]),1,1)+" "+units[i],width-95,15+i*dy0);
    // clearing black rect
    stroke(0);
    fill(0, 0, 0);
    rect(k-dk,y0+i*dy0,dk,-100);
    // 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
    line(k-dk,y0+i*dy0-valold[i],k,y0+i*dy0-val[i]);
    stroke(0);
    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
    
    valold[i]=val[i];
  }

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

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 6, 2018, 4:35pm UTC](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219/29 "2018-11-06T16:35:35Z")

</div>

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

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

```

[Previous page](https://discourse.processing.org/t/plotting-a-scrolling-graph/5219.md?page=1)