# Is possible use different layer for the axes on chart?

**URL:** <https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [May 12, 2019, 5:44am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150 "2019-05-12T05:44:58Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dondu](https://avatars.discourse-cdn.com/v4/letter/d/4491bb/32.png) [@dondu](https://discourse.processing.org/u/dondu)\
**Post date:** [May 12, 2019, 5:44am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150/1 "2019-05-12T05:44:58Z")

</div>

Hello,

I’m just starting with Processing to process data from serial port.  
I want to show animated data on chart something like the chart below.  
Is possible use different layer for the axes and scale lines on chart?

![](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/185a0064e0f7d16a969fb419c66c2b775e1adb3b.gif)

---

<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:** [May 12, 2019, 5:57am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150/2 "2019-05-12T05:57:39Z")

</div>

you could start with  
[Issue with using array after splitTokens()](https://discourse.processing.org/t/issue-with-using-array-after-splittokens/10826/4) this  
or mod version

```auto
// v01 get CSV line // like: 1023,927,843,761,693,0,0 A0,1,2,3,4 D2,3
// v02 save to table

Table table;
String outfile = "data/arduino.csv";
/*
A0,A1,A2,A3,A4,D2,D3
1023,927,839,751,672,0,0
*/

import processing.serial.*;
Serial port;

String ports, inString;
String[] elements;
boolean diagp = true;//false;//true;
int baud = 115200; // 300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 38400, 57600, 115200, 230400, 250000, 500000, 1000000, 2000000
boolean getrecord= false;
int many = 0, expect = 7, recs=0;
int[] values = new int[expect];
float zoom;

void setup() {
  size(300, 300);
  if ( diagp ) printArray(Serial.list());
  ports = Serial.list()[1];
  port = new Serial(this, ports, baud);
  port.bufferUntil('\n');
  stroke(0);
  zoom = (height-60)/1023.0;
  background(200, 200, 0);
  println("use \nkey [p] for diagnostic print\nkey [c] clear\nkey [s] save table");
  setup_table();
}

void draw() {
  if ( getrecord ) {
    getdata();
    stroke(200, 200, 0);
    line(recs, 0, recs, height); // the actual line is init with the background color first ( overwriting old graph ) 
    for (int i=0; i<expect; i++ ) { 
      float ypos = height-50 - values[i]*zoom;
      if ( i > 4 ) ypos = height-10*(i-4) - 5*values[i]; // for the digital vals
      if ( diagp ) println(" values ["+i+"] "+values[i]+" xpos "+recs+" ypos "+ypos);
      stroke(0, i*40, 200-i*40);
      point( recs, ypos ); // graph
    }
    recs++; // next pix xdir
    if ( recs > width ) recs = 0;
    stroke(255);
    line(recs, 0, recs, height); // and draw a white line ahead to show "cursor"
    stroke(200, 0, 0); // grid on cursor! analog
    for (int k=0; k<6; k++ ) line(recs, 10 + k*( height-60)/5, recs+3, 10 + k*( height-60)/5);
    stroke(0, 0, 200); // grid on cursor! digital
    for (int k=0; k<=3; k++ ) line(recs, height -10 - k*5, recs+5, height -10 - k*5);

    getrecord = false;
  }
}

void getdata() {
  if ( diagp ) println(inString);
  elements = splitTokens(inString, ","); // split and set some globals...
  int many = elements.length;
  if ( many >= expect ) {
    for (int i=0; i<expect; i++ ) { // convert the string to int only for the expected value list
      if ( diagp ) print(elements[i]+" , ");
      values[i] = int(elements[i]);
    }
    if ( diagp ) println();
    store_record();
  } else {
    println("com error, found short line:"+inString);
  }
}

void serialEvent(Serial thisport) { // read the serial buffer:
  inString = thisport.readString();
  if ( inString != null ) {
    inString = trim(inString); // clean
    getrecord = true;
  }
}

void keyPressed() {
  if ( key == 'p' ) println("diagp: "+(diagp = ! diagp));
  if ( key == 'c' ) background(200, 200, 0);
  if ( key == 's' ) { 
    saveTable(table, outfile);
    println("save to: "+outfile);
  }
}

void setup_table() {
  table = new Table();
  table.addColumn("A0");
  table.addColumn("A1");
  table.addColumn("A2");
  table.addColumn("A3");
  table.addColumn("A4");
  table.addColumn("D2");
  table.addColumn("D3");
}

void store_record() {
  TableRow newRow = table.addRow();
  for ( int c =0; c<7; c++) newRow.setInt(c, values[c]);
}

/*
// arduino code tested Arduino Leonardo Arduino IDE 1.8.9 hourly 
 
 String aline; // readable char line
 
 void make_aline() {
 aline = "";
 aline += analogRead(0);
 aline += ',';
 aline += analogRead(1);
 aline += ',';
 aline += analogRead(2);
 aline += ',';
 aline += analogRead(3);
 aline += ',';
 aline += analogRead(4);
 aline += ',';
 aline += digitalRead(2);
 aline += ',';
 aline += digitalRead(3);
 // ++ CR LF
 }
 
 int wait = 500;
 long baud = 115200; // 300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 38400, 57600, 115200, 230400, 250000, 500000, 1000000, 2000000
 
 void setup() {
 Serial.begin(baud);
 while (!Serial) {
 ; // wait for serial port to connect. Needed for native USB port only ( arduino leonardo )
 }
 }
 
 void loop() {
 make_aline();
 Serial.println(aline);
 delay(wait);
 }
 
 */

```

and make it more nice?

 ![SNAG-0113](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/ba078a768b04e2713e16d0e5bd6a5c43af860b88.jpeg)

---

<div class="post-metadata">

**Author:** ![dondu](https://avatars.discourse-cdn.com/v4/letter/d/4491bb/32.png) [@dondu](https://discourse.processing.org/u/dondu)\
**Post date:** [May 12, 2019, 6:25am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150/3 "2019-05-12T06:25:34Z")

</div>

I didn’t ask about how to tokenize data.  
Maybe i’m wrong, but in code You shown I don’t see anything about question i asked:

**Is possible use different layer for the axes and scale lines on chart?**

In other words i want to draw axes and horizontal and vertical scale lines (grid) **only once**.  
Then in other process i want to draw animated line representing data.

---

<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:** [May 12, 2019, 6:27am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150/4 "2019-05-12T06:27:16Z")

</div>

yes and no,  
actually i used a trick and put a kind of scale line on a running cursor

* * *

but the basic question is, do you use a static canvas ( no background() in draw )  
like i did above? then you have to do the axis like:  
a y1 axis left , a y2 axis right ( for a max 2 curve plot )

anyhow only one time, just not over draw it with cursor or data.

show us what chart you use now please?  
++ i mean show your code , formatted in

```auto
</> code tag 

```

---

<div class="post-metadata">

**Author:** ![dondu](https://avatars.discourse-cdn.com/v4/letter/d/4491bb/32.png) [@dondu](https://discourse.processing.org/u/dondu)\
**Post date:** [May 12, 2019, 6:30am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150/5 "2019-05-12T06:30:30Z")

</div>

I explained more editing post above when You wrote 🙂

---

<div class="post-metadata">

**Author:** ![dondu](https://avatars.discourse-cdn.com/v4/letter/d/4491bb/32.png) [@dondu](https://discourse.processing.org/u/dondu)\
**Post date:** [May 12, 2019, 6:34am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150/6 "2019-05-12T06:34:51Z")

</div>

I have no code yet. I’m asking only about layers.

---

<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:** [May 12, 2019, 6:37am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150/7 "2019-05-12T06:37:55Z")

</div>

sorry, i can not give you any answer about layers

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 16, 2019, 2:28am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150/8 "2019-05-16T02:28:51Z")

</div>

> [@dondu](#):
>
> Is possible use different layer for the axes and scale lines on chart?

Yes. That is possible.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 16, 2019, 5:15am UTC](https://discourse.processing.org/t/is-possible-use-different-layer-for-the-axes-on-chart/11150/9 "2019-05-16T05:15:44Z")

</div>

Technically layers are not necessary

Just put the code for axes etc. in a function and call it throughout. It’s not much processor load.

For layer write axes in a PGraphics - see reference

Use it as background