How to create animated line graph in Processing?

[bluefern]

I´m trying to make an animated line graph using data from .csv

I want to animate the lines and add the name of the series to the end of the line like this example:

Household debt balances (excluding mortgages) pic.twitter.com/gJbL5WIv05

— 📈 𝙻𝚎𝚗 𝙺𝚒𝚎𝚏𝚎𝚛 📊 (@lenkiefer) 13 de enero de 2019

Also I want to animate the x-axis and y a-xis.
Here’s the example I’m trying to emulate: https://pythonprogramming.net/static/images/matplotlib/live-matplotlib-graph-tutorial.gif

Is it possible to make this graph using processing?
Which library should I use?
Any suggestions?

[glv]

Hello,

It certainly is possible.

Check out the examples and tutorials here:
https://processing.org
https://processing.org/tutorials/
https://processing.org/tutorials/data/
https://processing.org/tutorials/trig/
https://processing.org/reference/

A simple plot example to get you started:

int limit;
float x, y;

void setup() 
  {
  size(640, 480);
  textSize(24);
  }

void draw() 
  {
  background(255);
  
  stroke(128);
  strokeWeight(1);
  line(0, height/2, width, height/2);
  line(width/2, 0, width/2, height);
 
  limit++;                        //Increments each frame
  if (limit > width) limit = 0;  
  
  strokeWeight(3);
  stroke(255, 0, 0);
  for(int i = 0; i< limit; i++)
    {
    x = i*TAU/100;  
    y = 100*sin(x) + 50*cos(x/2);
    point(i, y + height/2);      // Points for now
    }
  
  fill(0);
  textAlign(LEFT, CENTER);
  text(y, limit+10, y + height/2);  
  }

Take a look at the references and explore the possibilities!

There may be a library out there somewhere; this can be done without one.

[kll]

and the CSV part could start like:

// /data/data.csv
/*
date,breakfast,lunch,dinner
 2019/12/26,60,80,100
 2019/12/27,61,81,101
 */

Table table;
String infile = "data/data.csv";
int trows = 0, tcols;   

void setup() {
  size(500, 500);
  background(200, 200, 0);
  get_Table();  //___________
}

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

//____________________________________________________________
void get_Table() {
  table=loadTable(infile, "header");
  trows = table.getRowCount();
  tcols = table.getColumnCount();
  println("rows: "+trows+" columns: "+tcols+" in file: "+infile);
  table.setColumnType("breakfast", Table.INT); // optional type setting...
  fill(0); //__________________________________________________________________ text color on canvas
  int dy =0;
  for ( int c = 0; c < tcols; c++)  text( table.getColumnTitle(c)+" ", 10+100*c, 10); //__ header line
  dy++;
  for ( int r = 0; r < trows; r++) { //________________________________________ get data lines
    TableRow thisrow = table.getRow(r);
    for ( int c = 0; c < tcols; c++ ) text( thisrow.getString(c), 10+100*c, 10+15*dy );
    dy++;
  }
}

---

actually the most tricky part would be if you want add / edit / the csv data from processing.
tell us if you want go for that.

[bluefern]

Thanks. I´m trying to plot a graph from CSV data.
My data:
https://gist.githubusercontent.com/bagraprac75/140a58395f359a456ae659d518d45393/raw/b5128215ff8cda948ae82073884fb239605c8fba/daily%2520blood%2520sugar%2520levels.csv

I’m trying to do is something like this:

Sensing Platform - Example Graphing in Processing

Instead of the data value like the example share by @glv, I’d like the labels (v.gr. Breakfast) to be to the right of the last data point for each series.

How can I do that?

[glv]

Check out the references:

https://www.processing.org/tutorials/text
https://processing.org/reference/text_.html

My example displays a numeric value and you want to display a string.

[kll]

hi,
i see your “data”
and must ask you where you got that from?

as a (running) database that would be not useful,
actually in my example i show how it should look
a day record should be a new line in CSV file… ( and not a column )
( and i have a diabetics spreadsheet file ( google / drive ) for 10 years now )