# Use Processing to make continuous graph using CSV

**URL:** <https://discourse.processing.org/t/use-processing-to-make-continuous-graph-using-csv/16898>\
**Category:** Coding Questions\
**Created:** [January 6, 2020, 11:51am UTC](https://discourse.processing.org/t/use-processing-to-make-continuous-graph-using-csv/16898 "2020-01-06T11:51:39Z")\
**Posts on this page:** 1\
**Showing post:** 4

<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:** [January 6, 2020, 12:43pm UTC](https://discourse.processing.org/t/use-processing-to-make-continuous-graph-using-csv/16898/4 "2020-01-06T12:43:34Z")

</div>

a GRAPH / PLOT as a short window of data  
from ONE CSV file?  
or a graph of all data from CSV with a zoom function?

possibly better use a library ( loaded via PDE contribution manager ) like  
[https://jagracar.com/grafica.php](https://jagracar.com/grafica.php)

* * *

still i think you should start  
with your own little plot function  
-1- point(x,y)  
-2- rect()  
-3- a line connecting the measuring points  
and ignore the axis / grid beauty things at first

* * *

next need check data in a first loop for min max to auto adjust graph

```auto
float dmin, dmax, davg;
Table table;
String infilename = "data/data.csv";
int trow = 0; // = table.getRowCount();

boolean dprint = true; // temporary diag print

// ____________________________________________________________
void setup() {
  size(500, 500);
  get_Table();
  find_MinMax();
}

// ____________________________________________________________
void draw() {
  background(200, 200, 0);
  draw_graph();
}

// ____________________________________________________________
void get_Table() {
  table=loadTable(infilename, "header");
  trow = table.getRowCount();
  if (dprint) println("rows: "+trow+" in file: "+infilename);
  table.setColumnType("Time", Table.INT);
  table.setColumnType("Intensity", Table.FLOAT);  
}

// ____________________________________________________________
void find_MinMax() {
  float iintensity; // local temp
  dmin = 1000; // INIT range globals
  dmax = -1000;
  davg = 0;
  for (int i=0; i<trow; i++) {
    iintensity = table.getFloat(i, "Intensity");
    if ( iintensity > dmax ) dmax = iintensity;
    if ( iintensity < dmin ) dmin = iintensity;
    davg += iintensity;
  }
  davg = davg/trow; // sum devided by data records thresh=(davg + dmax)/2.0; // latest calc formula
  if (dprint) println("davg "+nf(davg, 1, 2)+" dmax "+dmax+" dmin "+dmin);
}

// ____________________________________________________________
void draw_graph() {
  float iintensity; // local
  float x0= 20, y0 = height-50, w = 1, zoom = 200; // init
  float graphgrid = 40;
  zoom = graphgrid*floor((height -100)/dmax/graphgrid); // rerange graph ( dmax - dmin ); 
  w = ( width- 2*x0 )/trow; // rerange graph by samples
  stroke(100, 100, 100);
  for ( int k =0; k<=int((height -100)/graphgrid); k++ ) {
    line(x0-1, y0+1, x0-1, 50);
    line(x0-1, y0+1-k*graphgrid, x0+w*trow, y0+1-k*graphgrid);
  }
  for (int i=0; i<trow; i++) {
    iintensity = table.getFloat(i, "Intensity");
    fill(0, 200, 0); 
    noStroke();
    rect(x0+i*w, y0, w, -zoom*iintensity);
  }
}

// ____________________________________________________________

```

 ![ECG1](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/ff69fc9d40386ac197d380d57bdbc1e5ebfd90a7.png)

* * *

some operation Key PlusPlus allow time range ZOOM and MOVE

```auto
float dmin, dmax, davg;
Table table;
String infilename = "data/data3.csv";
int trow = 0; // = table.getRowCount();

boolean dprint = true; // temporary diag print
// ECG_2
// use view range
int rstart=0, rend;
char cmode = ' ';
// ____________________________________________________________
void setup() {
  size(500, 500);
  get_Table();
  find_MinMax();
  println("operation: Key Plus Plus [s] [e] [UP] [DOWN] can select / zoom time range // OR [LEFT] [RIGHT] move range");
}

// ____________________________________________________________
void draw() {
  background(0, 0, 80);
  draw_graph();
}

// ____________________________________________________________
void get_Table() {
  table=loadTable(infilename, "header");
  trow = table.getRowCount();
  if (dprint) println("rows: "+trow+" in file: "+infilename);
  table.setColumnType("Time", Table.FLOAT);
  table.setColumnType("Intensity", Table.FLOAT);
}

// ____________________________________________________________
void find_MinMax() {
  float iintensity; // local temp
  dmin = 1000; // INIT range globals
  dmax = -1000;
  davg = 0;
  for (int i=0; i<trow; i++) {
    iintensity = table.getFloat(i, "Intensity");
    if ( iintensity > dmax ) dmax = iintensity;
    if ( iintensity < dmin ) dmin = iintensity;
    davg += iintensity;
  }
  davg = davg/trow; // sum devided by data records thresh=(davg + dmax)/2.0; // latest calc formula
  if (dprint) println("davg "+nf(davg, 1, 2)+" dmax "+dmax+" dmin "+dmin);

  rend=trow;
}

// ____________________________________________________________
void draw_graph() {
  float iintensity; // local
  float x0= 20, y0 = height-100, w = 1, zoom = 200; // init
  float graphgrid = 100;
  zoom = graphgrid*floor((height -100)/dmax/graphgrid); // rerange graph ( dmax - dmin ); 
  w = ( width- 2*x0 )/( rend - rstart );//trow; // rerange graph by samples
  stroke(100, 100, 100);
  for ( int k =0; k<=int((height -100)/graphgrid); k++ ) {
    line(x0-1, y0+1, x0-1, 50);
    line(x0-1, y0+1-k*graphgrid, x0+w*trow, y0+1-k*graphgrid);
  }
  int samples = rend - rstart;
  for (int i=0; i < samples; i++) {
    iintensity = table.getFloat(rstart+i, "Intensity");
    fill(0, 200, 0); 
    noStroke();
    rect(x0+i*w, y0, w, -zoom*iintensity);
  }
  text(table.getFloat(rstart, "Time"), x0, height-20); // ____ show start end time from table column "Time"
  text(table.getFloat(rend-1, "Time"), width-50, height-20);
}

// ____________________________________________________________

void keyPressed() { // ___________________________ KPP operation zoom [s] [e] [UP] [DOWN] move [LEFT] [RIGHT]
  int xdc, dc=10; // ______________________________ color range in steps
  if ( key == 's' || key == 'e' ) cmode = key; 
  else if ( keyCode == UP || keyCode == DOWN ) { // __________ zoom range
    if ( keyCode == UP ) xdc = dc;
    else xdc = -dc;
    if ( cmode == 's' ) rstart += xdc;
    else if ( cmode == 'e' ) rend += xdc;
    rstart = constrain(rstart, 0, rend);
    rend = constrain(rend, rstart, trow);
    println("mode: "+cmode+", record start "+rstart+" end "+rend);
  } else if ( keyCode == LEFT || keyCode == RIGHT ) { // _____ move range
    if ( keyCode == RIGHT ) xdc = dc;
    else xdc = -dc;
    rstart += xdc;
    rend += xdc;
    rstart = constrain(rstart, 0, trow);
    rend = constrain(rend, 0, trow);
  } else cmode = ' '; // __________________________ reset cmode on any other key
}

```

 ![ECG2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6cc9852b6f03f4db30dc4deffdee439e41851960.png)

---

_[View the full topic](https://discourse.processing.org/t/use-processing-to-make-continuous-graph-using-csv/16898)._