Following on from my first forray into Processing, I needed to display some data in a simple graph, with time as the X axis and scaled data value as the Y axis.

I thought I would post what I came up with here, as I think its quite nice (although perhaps not the best designed code) and it does a job which might be useful for others.

Design idea

I wanted to display a time-varying variable as a point on a graph, with a straight line between each data points. I wanted to be able to scale the whole graph easily. It needed to be be easy to read. I had a stream of data which entered my progam every second.

Processing Code

Here is the code I came up with. It uses a random input variable, so that you can view the example. You would need to change the random variable into your data point.

And here is the code, hopefully with some useful comments. You should be able to cut and paste it straight into a new Processing sketch and get a graph similar to the one above.

Feel free to adjust and re-use as you might require.

/*
 * Graphing program
 * by Matt Little 25/7/13 
 * 
 * This takes in a random value
 * Plots that data with a time stamp
 * When timeMax has gone by it redraws the graph and plots the next set of data
 */
int seconds = second();
int oldSeconds = 0;
float oldData = 0;
float newData = random(250);  // This is the data stream (in this case a random number to start with)
int startPointX = 50;  // Where to position the graph within the main box
int startPointY = 50;
int rectangleX = 500;  // The size of the graph and data
int rectangleY = 250;
int timeMax = 60;  // This is the maximum length of data shown. It will cycle back after this and delete previous data
int i=0;
void setup() {
  size(640, 360);  // The background size
  background(200);
  fill(123);
  strokeWeight(2); // Stroke weight to 2 pixels
  rect(startPointX,startPointY,rectangleX,rectangleY);
}
void draw() {
  newData = random(250);  // This is the next data point to display
  if(second()!=seconds)  // Only draw a new line if the time has changed - every second
  {
    i++;  // This is the index for saving the data and displaying the data
    if(i==1)
    {
      // Redraw the graph, deleting previous lines
      stroke(0);  // This is the colour of the edge of the box
      strokeWeight(2); // Stroke weight to 2 pixels
      fill(123);
      rect(startPointX,startPointY,rectangleX,rectangleY);
    }
    
    seconds = second();  // Store the new time to check again
    
    stroke(255,134,100);  // This is the colour of the line
    strokeWeight(8); // Stroke weight to 8 pixels
    line((((rectangleX*oldSeconds)/timeMax)+startPointX), rectangleY-oldData+startPointY, 
             ((((rectangleX*i)/timeMax))+startPointX), rectangleY-newData+startPointY);
    
    oldData = newData;
    oldSeconds = i; 
   
    if(i>=timeMax)
    {
      i=0;  // Reset the time base
      oldSeconds = i; 
    }  
  }
}