Arduino + Processing : Analogue bar graph

This is just a basic example of sending the arduino’s 6 analogue readings to a bar graph sketch made with processing. If you would like to use the more advanced graph, you can have a look at this newer source code, which allows you to draw much more advanced graphs from the arduino.

Arduino Code:

//Sending 8 bit reading (256) so analogue 
//reading can be sent in 1 byte
int Analogue0 = 0; // first analog sensor
int Analogue1 = 0; // second analog sensor
int Analogue2 = 0; // digital sensor
int Analogue3 = 0; // second analog sensor
int Analogue4 = 0; // second analog sensor
int Analogue5 = 0; // second analog sensor
int inByte = 0; // incoming serial byte
void setup()
 // start serial port at 9600 bps:
establishContact(); // send a byte to establish contact until Processing responds 
void loop()
 // if we get a valid byte, read analog ins:
 if (Serial.available() > 0) {
 // get incoming byte:
 inByte =;
 // read first analog input, divide by 4 to make the range 0-255:
 Analogue0 = analogRead(0)/4;
 // delay 10ms to let the ADC recover:
 // read second analog input, divide by 4 to make the range 0-255:
 Analogue1 = analogRead(1)/4;
 // read switch, multiply by 155 and add 100
 // so that you're sending 100 or 255:
 Analogue2 = analogRead(2)/4;
 Analogue3 = analogRead(3)/4;
 Analogue4 = analogRead(4)/4;
 Analogue5 = analogRead(5)/4;
// send sensor values:
 Serial.write(Analogue0 );
 Serial.write(Analogue1 );
 Serial.write(Analogue2 );
 Serial.write(Analogue3 );
 Serial.write(Analogue4 );
 Serial.write(Analogue5 );
void establishContact() {
 while (Serial.available() <= 0) {
 Serial.write('A'); // send a capital A
Processing code
// Feel Free to edit these variables ///////////////////////////
String xLabel = "Analogue Inputs";
String yLabel = "Voltage (V)";
String Heading = "The Graph Sketch";
String URL = "01/02/2010";
float Vcc = 5.0; // the measured voltage of your usb
int NumOfVertDivisions=5; // dark gray
int NumOfVertSubDivisions=10; // light gray
int NumOfBars=6; // you can choose the number of bars, but it can cause issues
 // since you should change what the arduino sends
// if these are changed, background image has problems
// a plain background solves the problem
int ScreenWidth = 600, ScreenHeight=400;
// Serial port stuff ///////////////////////
import processing.serial.*;
Serial myPort;
boolean firstContact = false;
int[] serialInArray = new int[6];
int serialCount = 0;
int LeftMargin=100;
int RightMArgin=80;
int TextGap=50;
int GraphYposition=80;
float BarPercent = 0.4;
int value;
PFont font;
PImage bg;
int temp;
float yRatio = 0.58;
int BarGap, BarWidth, DivisounsWidth;
int[] bars = new int[NumOfBars];
void setup(){
// bg = loadImage("BG.jpg");
/// NB SETTINGS ////////////////////////////////////////////////////////
 myPort = new Serial(this, Serial.list()[2], 9600);
DivisounsWidth = (ScreenWidth-LeftMargin-RightMArgin)/(NumOfBars);
 BarWidth = int(BarPercent*float(DivisounsWidth));
 BarGap = DivisounsWidth - BarWidth;
 font = createFont("Arial",12);
void draw(){
// background(bg); // My one used a background image, I've
 background(250); // commented it out and put a plain colour
// Headings(); // Displays bar width, Bar gap or any variable.
// Send Recieve data //
void serialEvent(Serial myPort) {
// read a byte from the serial port:
 int inByte =;
if (firstContact == false) {
 if (inByte == 'A') {
 myPort.clear(); // clear the serial port buffer
 firstContact = true; // you've had first contact from the microcontroller
 myPort.write('A'); // ask for more
 else {
 // Add the latest byte from the serial port to array:
 serialInArray[serialCount] = inByte;
// If we have 6 bytes:
 if (serialCount > 5 ) {
for (int x=0;x<6;x++){
bars[x] = int (yRatio*(ScreenHeight)*(serialInArray[x]/256.0));
// Send a capital A to request new sensor readings:
 // Reset serialCount:
 serialCount = 0;
/////// Display any variables for testing here//////////////
void Headings(){
 fill(0 );
 text("BarWidth",50,TextGap );
 text("BarGap",250,TextGap );
 text("DivisounsWidth",450,TextGap );
 text(BarWidth,100,TextGap );
 text(BarGap,300,TextGap );
 text(DivisounsWidth,520,TextGap );
void PrintBars(){
int c=0;
 for (int i=0;i<NumOfBars;i++){
 rect(i*DivisounsWidth+LeftMargin, ScreenHeight-GraphYposition, BarWidth, -bars[i]);
 text(float(bars[i])/(yRatio*(ScreenHeight))*Vcc, i*DivisounsWidth+LeftMargin+BarWidth/2, ScreenHeight-bars[i]-5-GraphYposition );
 text("A", i*DivisounsWidth+LeftMargin+BarWidth/2 -5, ScreenHeight-GraphYposition+20 );
 text(i, i*DivisounsWidth+LeftMargin+BarWidth/2 +5, ScreenHeight-GraphYposition+20 );
void Axis(){
 for(float x=0;x<=NumOfVertSubDivisions;x++){
int bars=(ScreenHeight-GraphYposition)-int(yRatio*(ScreenHeight)*(x/NumOfVertSubDivisions));
 for(float x=0;x<=NumOfVertDivisions;x++){
int bars=(ScreenHeight-GraphYposition)-int(yRatio*(ScreenHeight)*(x/NumOfVertDivisions));
 line(LeftMargin-15, ScreenHeight-GraphYposition+2, ScreenWidth-RightMArgin-DivisounsWidth+50, ScreenHeight-GraphYposition+2);
void Labels(){
 for(float x=0;x<=NumOfVertDivisions;x++){
int bars=(ScreenHeight-GraphYposition)-int(yRatio*(ScreenHeight)*(x/NumOfVertDivisions));

24 thoughts on “Arduino + Processing : Analogue bar graph

  1. Pingback: arduino+processing=graficos » Lab do nsa4ever

  2. Pingback: Arduino + Processing : Analogue bar graph « Arduinian Tales

  3. Hi scott,

    Excellent application!

    I’ll make sure to give your code a go next time I’m playing with processing! ( still need to install processing on my new machine 😉 )


  4. on line 120 of the Processing code, im geting an error “expecting SEMI, found ‘,'” specifically, its the code for PrintBars()

    If i remove the stuff in the brackets, it plays ok, otherwise, I always get the error.
    Any pointers of what i could be doing wrong?

    • It sounds like whatever browser you’re using replaced the semi with a comma when you copied and pasted it.

      You don’t have to change any of “the stuff in brackets” etc.
      good luck

      • I got the same error with spike.
        This is what I copy to processing.
        It seem that the for loop was missing “}”
        Any help would be appreciated.
        void PrintBars(){
        int c=0;
        for (int i=0; ifloat(bars[i])/(yRatio*(ScreenHeight))*Vcc , i*DivisounsWidth+LeftMargin+BarWidth/2, ScreenHeight-bars[i]-5-GraphYposition);
        text(“A”, i*DivisounsWidth+LeftMargin+BarWidth/2 -5, ScreenHeight-GraphYposition+20 );
        text(i, i*DivisounsWidth+LeftMargin+BarWidth/2 +5, ScreenHeight-GraphYposition+20 );

  5. AAAAHHHHH!!!!!!

    I’ve just realised that copying and pasting code from Processing to Wiring (So I can get it in html format) chops out lines of code. 5 Lines were missing. Been fixed.

    Thanks for pointing out the mistakes cbr1k & spike.

    My excuse for taking so long to reply: I’m a south African student… The world cup put a pause to my life for a while… Time for me to get back to work.

  6. Hi BoolScot!

    I am having a terrible hard time to cut and paste the Processing code and Gobetwino code from your pages I have found on Internet.
    I have used 3 different browsers without being sure that I have all the code in place.

    Can you please indicate with proper code headers in the top of each code section to what the file names for the stored code have to be. And maybe some comments regarding which code section is .pde or Processing code.
    How about a small diagram to indicate the data flow between Arduino/ PC / PC processes?

    I am having a problem in browsers that I see header Processing Code followed by block of code with scroll bars. Scrolling to the bottom of this block, I see another horizontal scroll bar.
    Then a new header Arduino Code and a code block with scroll bars. This one seems to be unique and only have one set of scroll bars. Possibly my browsers is incorrectly configured for using WordPress.
    How about (if possible !!) include a zip file with all the code with all your nice comments lately made, so I can unzip and pass to the relevant IDEs for use.
    I have started on development of my own logger with some very basic outputs to serial port so that I can “capture” .csv file from a primitive terminal program running connected on PC from my homebrew Arduino Serial board. So I delighted to find your example set for all to see in going a step further getting nice displays on the PC side which I surely would like to follow.

    Another comment: so much Arduino stuff out there already , it is a major task to sift through everything before one goes ones own way!,
    Hop I am not asking too much time away from your important goals.
    Good luck with the studies and thanks in advance if you can help.


  7. That scroll bar bug was fixed. I give up trying to keep the colour of the code. It seems to cause problems.

    Sorry I didn’t put too much effort into these posts. I always jump straight into my next mission as soon as it works on my PC, instead of making them “fail safe” and user friendly. These posts are all headed in the same direction. My project (Due in about 3 months) involves a library that you include on the arduino side that make it easy to graph and save the data. sigh. Workload has exploded now and I just don’t have enough time to neaten up my old posts yet. I’ll probably end up making an exe with c++ instead of processing. Wish it was as easy…

    I’ll try and do a bit more editing soon

    • Ever since the latest update you can’t name variables A0, A1 etc. I think I made this with Arduino 17.

      Just replace A0 with Analogue0 (or anything). I’ll correct the code now…

      Thanks for reminding me.

  8. Pingback: FFT Library for Arduino

  9. Pingback: arduino+processing=graficos – blog do nsa

  10. hey mate i get an error when I compile your code on arduino 1.0.1
    As of Arduino 1.0, the ‘BYTE’ keyword is no longer supported.
    Please use Serial.write() instead.

    I replaced BYTE with Serial.write(), but still get an error.
    Serial.print(Analogue0 , Serial.write());

    I am very new to this arduino but your program is seems extremely useful. Can you please fix this error and send me the code on

    • Thanks Varun. I wrote that code about 2 years ago. I’ve just posted an update with the changes. It now works with the newest version. you can copy the code from the post.

      Enjoy 🙂

      There is also processing code for a much more advanced graph, I added a link to that page.

      • cheers i got it working. loving your worrk bro. I’ve gota slight problem that I’ve posted on one of your other pages. Its urgent, Please reply asap thanks.

  11. Thank you so much for the excellent code! If you don’t mind, I’d like permission to use this code and modify it for a project I’m working on that needs analog sensor graphs. Great job on this program, good luck in your endeavors!

  12. My brother recommended I might like this website.
    He was entirely right. This post actually made my day. You cann’t imagine simply how much time I had spent for this info! Thanks!

  13. I have a project that Im working on and i just started arduino yesterday, so im pretty inexperienced. I need some help with what I would assume to be a pretty complicated project. Could I get somebody’s email that would be willing to help me out with the code?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s