How to plot Arduino Serial Data on Graph

 Arduino can be used to acquire sensor data and the data can be visualized and analyze if we can plot them on 2D or 3D graphs. Here is one example how we can do this. Arduino will be used to capture analog data on two analog pins where two potentiometers are connected. This captured data is sent serially over the USB. On the PC side we will use processing software(which is open source and free) to (1) read in serially the data sent by Arduino (2) create a 2D graph and plot the sensor potentiometer analog value on the graph.

With this simple example one can display real time information on graph and use it to share on the web. This can be useful for Internet of Things(IoT) applications. Though we are using two potentiometer reading, one can simply replace the potentiometer with other kinds of sensors such as humidity sensor, temperature sensor, soil sensor etc. Also this can be helpful in development of virtual reality based online games.

 Prerequisites:

This tutorial is based on the following previous tutorials.

- How to send data from Arduino to Processing

- Sending multiple data from Arduino to Processing

Video demonstration

To illustrate what one can expect to get reading this tutorial the following video might be useful before moving on to read the rest of this tutorial.

Hardware & Schematic Diagram

The following picture shows two 10KOhm potentiometers connected to analog input pins A0 and A1 of Arduino using breadboard for connection.

The schematic diagram is below which is very simple.

Software & Programing

Here we have two different programs. One is for Arduino and the other is for Processing.

Arduino program

The following Arduino program reads the two potentiometer analog voltage at A0 and A1 pins and sends them serially.

void setup() {
  Serial.begin(9600);
  Serial.println("0,0");
}

void loop() {
  if (Serial.available()>0){
    char input = Serial.read();
    //read potentiometers
    int pot0Val = analogRead(A0);
    Serial.print(pot0Val);
    Serial.print(',');
    delay(1);
    int potVal = analogRead(A1);
    Serial.println(potVal);
    }
}

Processing program

The following processing program reads in the data coming from Arduino and plots them on 2D graph. 

import processing.serial.*;
import grafica.*;

Serial myport;
float x, y;

GPlot plot;
GPointsArray points = new GPointsArray();
   
void setup(){
  size(800,600);
  myport = new Serial(this, "COM3", 9600);
  myport.bufferUntil('\n');

  plot = new GPlot(this);
  plot.setDim(700, 500);
  plot.setPoints(points);
  plot.setPointSize(40);
  plot.setPointColor(color(47,32,196));
  plot.setXLim(0, 1050); // set x limits
  plot.setYLim(0, 1050); // set y limits
  plot.setTitleText("Two Potentiometer controlled Ball");
  plot.getXAxis().setAxisLabelText("POT1 Value");
  plot.getYAxis().setAxisLabelText("POT2 Value");
}

void draw(){ 
  plot.beginDraw();
  plot.drawBackground();
  plot.drawXAxis();
  plot.drawYAxis();
  plot.drawTitle();
  plot.drawLines();
  plot.drawGridLines(GPlot.BOTH);
  plot.drawPoints();
  plot.setPoints(points);
  plot.addPoint(x,y);
  plot.endDraw();
}


void serialEvent(Serial myport) {
  String portData = myport.readString();
  String[] stringData = split(portData, ',');
  float[] values = float(stringData);
  x = values[0];
  y = values[1];
  myport.write('s');
}

Here we have used the Graphica library to create the 2D graph which you must first install if you don't have it already. To install this you have to go and click on Sketch > Import Library > Add Library. In the Contribution manager you can search for the keyword Graphica and then install it. Once you have installed it, in order to use this library you can simply go to again Sketch > Import Library and then click on the graphica. This will automatically add import graphica.* into the processing sketch.

To use the graph library, we first create an instance of Gplot called plot here. Next we have to create an object array of GPointsArray called points here. This is used to store the value of point location on the graph. These points are the serial data from potentiometer 1 and 2. After that in the setup() function we create new object of Gplot using the statement plot=new Gplot(this) and then we can use various methods of the instance of plot. The statements following this are used to setup the graph which does not change such as setDim(), setpoints(), setPointSize(), setPointColor(Color()), setXLim(), setYLim() etc. In the draw() function we draw the x and y value from the serial COM port using the object plot on the graph.