Plotting a scrolling Graph

Hello !,

for my school project I need to make a scrolling graph of several data. It’s combined with arduino data.

We are already at the point that arduino sends the data from the sensors to processing, and everything works. Just now we have to plot this data in a graph that keeps updating. Here is our Processing code, please help us. We are noobies.

import processing.serial.*; // bibliotheek van seriële communicatie
Serial myPort; // seriëel object wordt gemaakt
String val; // de data die ontvangen wordt van de seriële poort
int temperatuur;
int luchtdruk;
int luchtvochtigheid;
void setup()
{
  
  size(600,600);
  String portName = Serial.list()[0]; // de poort waar het signaal binnen komt
  myPort = new Serial(this, portName, 9600);
}
  void draw(){

  if ( myPort.available() > 0) 
  {  // If data is available,
    val = myPort.readStringUntil('\n');         // read it and store it in val
    if (val != null)
    {
      //println(val); //print it out in the console
      String [] list = split(val, ';');
      luchtdruk = int(list[0]);
      luchtvochtigheid = int(list[1]);
      temperatuur = int(list[2]);
      print("temperatuur: ");println(temperatuur);
      print("luchtdruk:  ");println(luchtdruk);
      print("luchtvochtigheid: ");println(luchtvochtigheid);
      
    }
    
    background( 0, 200, 0);
    textSize(40);
    fill(0,0,0);
    text("temperatuur:  ", 30, 50);
    text(temperatuur, 400, 50);
    text("°C",500,50);
    text("luchtdruk:  ", 30,100);
    text(luchtdruk, 400,100);
    text("kPa", 500,100);
    text("luchtvochtigheid: ", 30,150);
    text(luchtvochtigheid, 400,150);
    text("%", 500,150);
    
  }
  
}

Alright. So you’re reading three values from the serial port, and you want to make a graph with them.

What sort of graph? A bar graph? A line graph? How many values should it display at once before it scrolls?

Yes, i am reading 3 value’s. ‘’ temperatuur’’ ( dutch for temperature )
luchtvochtigheid ( density)
luchtdruk ( pressure)

i want to make a line graph that continues to move on to the right.
the incoming data is listed in the list[0] to list[2].

here a example where you have to fill the values dynamic
it is a running chart very basic.

String[] list = new String[3];
int k = 5;
int y0=110, dy0=120;

void setup(){
 size(800,360);
 background(200,200,0);

}

void draw(){  // if new data from arduino Ain raw as string:
list[0] = "1000";
list[1] = "200";
list[2] = "50";

float val1 = map(int(list[0]),0,1023,0,100);
float val2 = map(int(list[1]),0,1023,0,100);
float val3 = map(int(list[2]),0,1023,0,100);
stroke(200,0,200);
line(k,y0+0*dy0,k,y0+0*dy0-val1);
line(k,y0+1*dy0,k,y0+1*dy0-val2);
line(k,y0+2*dy0,k,y0+2*dy0-val3);
stroke(255);
line(k+1,y0+0*dy0,k+1,y0+0*dy0-100);
line(k+1,y0+1*dy0,k+1,y0+1*dy0-100);
line(k+1,y0+2*dy0,k+1,y0+2*dy0-100);

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

like

Thank you very much, I will try that one.
For the exact thing i am looking for is this link: https://www.youtube.com/watch?v=C_gyGXWIgHY starts at 1:34. the green line is what i want.
I tried this code but doesnt work for me, or i do something wrong. I didn’t have errors tho.

yes, there are so many options,

  • green on black…
  • (line) bar or dot
  • 3 graphs or 3 lines in one graph
    also you must work on other details,
  • add text
  • current value ranged to UNITS

or as i revived the old

LINE CHART

starting from print lines in the arduino ide monitor

|________|_____*___|_+_______|

to a html version

Hi there helper,
I tried your code, maybe i did something wrong. I changed the variables into mine. but all i get is 3 white bars with a small pink one. I just can’t get it done.
besides that, I would like 3 lines in 1 graph. each another colour.
this is my code; and what i get out of that.

String[] list = new String[3];
int k = 5;
int y0=110, dy0=120;
import processing.serial.*; // bibliotheek van seriële communicatie
Serial myPort; // seriëel object wordt gemaakt
String val; // de data die ontvangen wordt van de seriële poort
int pressure;
int temperature;
int density;

void setup(){
 size(800,360);
 background(200,200,0);
   String portName = Serial.list()[0]; // de poort waar het signaal binnen komt
  myPort = new Serial(this, portName, 9600);

}

void draw(){  // if new data from arduino Ain raw as string:
if ( myPort.available() > 0) 
  {  // If data is available,
    val = myPort.readStringUntil('\n');         // read it and store it in val
    if (val != null)
    {
      //println(val); //print it out in the console
      String [] list = split(val, ';');
      pressure = int(list[0]);
      density = int(list[1]);
      temperature = int(list[2]);

float val1 = map(int(list[0]),0,1023,0,100);
float val2 = map(int(list[1]),0,1023,0,100);
float val3 = map(int(list[2]),0,1023,0,100);
stroke(200,0,200);
line(k,y0+0*dy0,k,y0+0*dy0-val1);
line(k,y0+1*dy0,k,y0+1*dy0-val2);
line(k,y0+2*dy0,k,y0+2*dy0-val3);
stroke(255);
line(k+1,y0+0*dy0,k+1,y0+0*dy0-100);
line(k+1,y0+1*dy0,k+1,y0+1*dy0-100);
line(k+1,y0+2*dy0,k+1,y0+2*dy0-100);

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

this is the graph he shows me, it moves slowly to the right, but nothing happends.

please help me.

possibly should do some diagnostic print on the incomming

the data / lines from arduino in arduino ide monitor look?

1023;512;0;

Yes ,
i just noticed it is working. it is just very very very slow moving to the right …
how can i adjust the speed ?

?? one arduino line gives 3 values plotted in one vertical line so ONE PIXEL
per arduino record

i guess it takes about 10-20 mins before it reaches the end of the screen.

you not know your own arduino program ( and how often it is sending )?

well… i am a student and i had to programm 3 sensors. ( pressure, temperature and density). The sensor has to recalculate the variables to make it celcius and kPa and %. so, here is my code;

#include "DHT.h" //Activatie van de luchvochtigheid en temperatuur sensor.
#include<Wire.h> //Activatie van de druk sensor.
#define DHTPIN 2     // De gekozen pin die we aangesloten hebben.
#define DHTTYPE DHT22   // De luchtvochtigheid en temperatuursensor.
#define Addr 0x60 //adress van sensor MPL115A2.
int maxHum = 60; // Een maximale luchtvochtigheid waarde voor het programma.
int maxTemp = 40; // Een maximale temperatuur waarde voor het programma.

DHT dht(DHTPIN, DHTTYPE);

unsigned int data[8];
float a1 = 0.0, b1 = 0.0, b2 = 0.0, c12 = 0.0;

void setup() {

    //luchtvochtigheid en temperatuur sensor
  Serial.begin(9600); 
  dht.begin();

    //temperatuur en druk sensor
  // Initialise I2C communication
  Wire.begin();
  // Initialise Serial Communication, set baud rate = 9600
  Serial.begin(9600);

  for (int i = 0; i < 8; i++)
  {
    // Start I2C Transmission
    Wire.beginTransmission(Addr);
    // Select data register
    Wire.write(4 + i);
    // Stop I2C Transmission
    Wire.endTransmission();

    // Request 1 byte of data
    Wire.requestFrom(Addr, 1);

    // Read 1 byte of data
    // A10 msb, A10 lsb, Bb1 msb, Bb1 lsb, B2 msb, B2 lsb, C12 msb, C12 lsb
    if (Wire.available() == 1)
    {
      data[i] = Wire.read();
    }
  }

  // Convert the data to floating points
  a1 = ((data[0] * 256.0) + data[1]) / 8.0;
  b1 = ((data[2] * 256) + data[3]);
  if (b1 > 32767)
  {
    b1 -= 65536;
  }
  b1 = b1 / 8192.0;
  b2 = ((data[4] * 256) + data[5]);
  if (b2 > 32767)
  {
    b2 -= 65536;
  }
  b2 = b2 / 16384.0;
  c12 = ((data[6] * 256.0 + data[7]) / 4.0) / 4194304.0;
  delay(300);
}

void loop() {

  //luchtvochtigheid en temperatuur sensor
  delay(2000); // De vertraging voor de sensor om een beter waarden te krijgen.
  float h = dht.readHumidity();
  // Read temperature in Celsius
  float t = dht.readTemperature();
  // Check of read niet lukt.
  if (isnan(h) || isnan(t)) {
    Serial.println("Failed to read from DHT sensor!");
    return;
  }
  //temperatuur en druk sensor
// Start I2C Transmission
  Wire.beginTransmission(Addr);
  // Send Pressure measurement command
  Wire.write(0x12);
  // Start conversion
  Wire.write(0x00);
  // Stop I2C Transmission
  Wire.endTransmission();
  delay(300);

  // Start I2C Transmission
  Wire.beginTransmission(Addr);
  // Select data register
  Wire.write(0x00);
  // Stop I2C Transmission
  Wire.endTransmission();

  // Request 4 bytes of data
  Wire.requestFrom(Addr, 4);

  // Read 4 bytes of data
  // pres msb, pres lsb, temp msb, temp lsb
  if (Wire.available() == 4)
  {
    data[0] = Wire.read();
    data[1] = Wire.read();
    data[2] = Wire.read();
    data[3] = Wire.read();
  }

  // Convert the data to 10-bits
  int pres = (data[0] * 256 + (data[1] & 0xC0)) / 64;
  int temp = (data[2] * 256 + (data[3] & 0xC0)) / 64;

  // Calculate pressure compensation
  float presComp = a1 + (b1 + c12 * temp) * pres + b2 * temp;

  // Convert the data
  float pressure = (65.0 / 1023.0) * presComp + 50.0;
  float cTemp = (temp - 498) / (-5.35) + 25.0;
  float fTemp = cTemp * 1.8 + 32.0;


int waarde1 = pressure;
int waarde2 = h;
int waarde3 = t;
Serial.print(waarde1);
Serial.print(";");
Serial.print(waarde2);
Serial.print(";");
Serial.print(waarde3);
Serial.println(";");

delay(500);


}

it is a long code, with a lot of calculating. i really don’t know every line in there.
also i don’t know what you mean. i am a noobie in this sort of things.
can u describe how i can see how many times it is sending ?

i like your kindess and help by the way. i appriciate it a lot. !

if you start the arduino IDE and open the monitor you see what is send and how often,

delay(2000); at the beginning
+
delay(500); at the end
might be 2 records in 5 second,

and my graph is width - 2 * 5 = 790 pix
then it starts at the beginning

if the values are already in 90,57 degC and not 745 of 1023 Ain
you need first to convert from string to FLOAT, not INT
and must find a new ranging in each map to make it for 100pix line range

ok, you convert from float to int and send ( very bad resolution ) so
string to int
is OK
range up to you

Allright, checked that. it sends 3 numbers in this way: 40;20;30. ( example numbers)
so is this a float or an int ?
how do i adjust the ranging in the map() function ?

also it is once every 3-4 seconds.

thanks, so change the 1023 to 100, or even smaller, up to you

so 790pix * 3sec = 39.5 minutes memory
if you would make lines ( last point to new point ) and a skip of n pix between the samples
the show might be much better, but that short memory is reduced even more…

i not go into details, but usually data are stored to array, condensed to averages and saved to historic data file ( ok , next class )

which 1023 ? if i change it in the processing code there is no difference. even if I numbered it 50.
or is there another 1023 that i have to change ?

nevermind, I see the pink bars grew in length. that is good but i also need that the x-axis goed faster. how do i change that ?
image

see my edited last post