How to create animated line graph in Processing?

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?

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.

3 Likes

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() {
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.

2 Likes

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

Iβm trying to do is something like this:

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?

Check out the references:

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

hi,