Charts 

Creating bar charts, line graphs and scatter plots is very simple in statistical packages like Excel or R, but can be quite tedious to draw in Processing. The Chart classes make creating charts quick and easy by handling all the details of scaling, axis plotting and visual appearance. Default charts can be created with a very few lines or can be customised to use your own visual style.

 

Using charts in Processing

The BarChart and XYChart classes can be used to create a range of charts for displaying statisitcal data. You will need to import the relevant classes into your sketch with the line:

 
import org.gicentre.utils.stat.*;
 

For full details of the methods available see the BarChart API and the XYChart API. See also, the ChartExample sketch (which produces the chart above)  supplied in the examples folder of the gicentreUtils library.

 

Simple bar charts

To create a simple bar chart, the minimum you have to do is to provide the data to be charted and tell the bar chart to draw itself. The following example will draw a minimal bar chart containing 5 values:

Output from simple bar chart sketch

import org.gicentre.utils.stat.*;    // For chart classes.

// Sketch to to draw a very simple bar chart.
// Version 1.1, 3rd November, 2013.
// Author Jo Wood.

BarChart barChart;

// Initialises the sketch and loads data into the chart.
void setup()
{
  size(300,200);
 
  barChart = new BarChart(this);
  barChart.setData(new float[] {0.76, 0.24, 0.39, 0.18, 0.20});
}

// Draws the chart in the sketch
void draw()
{
  background(255);
  barChart.draw(15,15,width-30,height-30); 
}
 

The BarChart object should be delcared outside of any methods (line 7) since it is used by both setup() and draw(). It is initialised in line 14 and the data are added as an array of numbers in line 15. To draw the chart, somewhere in your sketch's draw() method you should call the chart's own draw() method, passing to it the bounds of the rectangle in which you want to draw the chart. The four parameters (line 22) are in the order left, top, width and height. 

You can add axes to the chart by calling showValueAxis() and showCateogryAxis(). Note that several of the methods that apply to one or the other of the bar chart axes refer to the axis along which bars are laid out as the category axis and the axis along which each bar is measured as the value axis. By default the value axis is scaled between the rounded minumum and maximium values of your data. You can force the minimum and maximum values to be fixed by calling setMinValue() and setMaxValue(). This gives us a little more control over the appearance of our chart: 

Simple bar chart with axes shown

void setup()
{
  size(300,200);
 
  barChart = new BarChart(this);
  barChart.setData(new float[] {0.76, 0.24, 0.39, 0.18, 0.20});
    
  // Axis scaling
  barChart.setMinValue(0);
  barChart.setMaxValue(1);
    
  barChart.showValueAxis(true);
  barChart.showCategoryAxis(true);
}
 

 You can format the appearance of the axis labels in a number of ways. By default the font used to display axis tic labels will be the default font of your Processing sketch. If you explicitly set the Processing font before drawing the sketch, this will be used for all text. You can control the formatting of any numbers using standard Java DecimalFormat notation. For example, to ensure that all numbers are displayed to two decimal places, you would use setValueFormat("#.00");. To display commas in large numbers, you would use setValueFormat("###,###,###,###");. To use scientific notation, you could use setValueFormat("0.##E0");.

In many cases, the bar chart categories are unlikely to be usefully numbered by the default 1...n. We can add explicit labels by calling the setBarLabels() method, supplying an array of strings in the same order as the original data. The following example shows how these axis customisation methods may be used:

Bar chart with customised font and categorical labels

void setup()
{
  size(300,200);
 
  barChart = new BarChart(this);
  barChart.setData(new float[] {0.76, 0.24, 0.39, 0.18, 0.20});
    
  // Scaling
  barChart.setMinValue(0);
  barChart.setMaxValue(1);
  
  // Axis appearance
  textFont(createFont("Serif",10),10);
  
  barChart.showValueAxis(true);
  barChart.setValueFormat("#%");
  barChart.setBarLabels(new String[] {"Cynthia","Daniel","Eli",
                                       "Fasil","Gertrude"});
  barChart.showCategoryAxis(true);
}
 

 You can control the colour of the bars and with the setBarColour() method which takes as a parameter a standard Processing colour definition (e.g. color(255,0,0) for bright red, color(0,0,255,128) for translucent blue). Alternatively you can specifiy a set of values that will be mapped to a colour table. This allows you to colour each bar individually according to an independent set of data values.

The width of the bars is determined by the size of the rectangle in which they are drawn and the number of bars to draw. This can be further refined by setting the gap between each bar in pixel units. This is done with the setBarGap() method. Finally, the orientation of the entire chart can be controlled with transposeAxes(), which allows the category and value axes to be swapped. These modifications are shown in the following example:

Transposed bar chart with custom colours

void setup()
{
  size(300,200);
 
  barChart = new BarChart(this);
  barChart.setData(new float[] {0.76, 0.24, 0.39, 0.18, 0.20});
    
  // Scaling
  barChart.setMinValue(0);
  barChart.setMaxValue(1);
  
  // Axis appearance
  textFont(createFont("Serif",10),10);
  
  barChart.showValueAxis(true);
  barChart.setValueFormat("#%");
  barChart.setBarLabels(new String[] {"Cynthia","Daniel","Eli",
                                       "Fasil","Gertrude"});
  barChart.showCategoryAxis(true);

  // Bar colours and appearance
  barChart.setBarColour(color(200,80,80,150));
  barChart.setBarGap(4);
  
  // Bar layout
  barChart.transposeAxes(true);
}
 

Simple line charts and scatterplots

Line charts can be created in a similar way to bar charts, but intead of creating a BarChart object we create an XYChart object. Axes and colours can be customised in a similar way, except that the two axes are referred to as X and Y rather than Category and Value. The following example creates a simple line chart representing a time series:

Basic line chart showing time series

import org.gicentre.utils.stat.*;    // For chart classes.

// Displays a simple line chart representing a time series.

XYChart lineChart;

// Loads data into the chart and customises its appearance.
void setup()
{
  size(500,200);
  textFont(createFont("Arial",10),10);

  // Both x and y data set here.  
  lineChart = new XYChart(this);
  lineChart.setData(new float[] {1900, 1910, 1920, 1930, 1940, 1950,
                                  1960, 1970, 1980, 1990, 2000},
                    new float[] { 6322,  6489,  6401, 7657, 9649, 9767,
                                  12167, 15154, 18200, 23124, 28645});
  
  // Axis formatting and labels.
  lineChart.showXAxis(true); 
  lineChart.showYAxis(true); 
  lineChart.setMinY(0);
    
  lineChart.setYFormat("$###,###");  // Monetary value in $US
  lineChart.setXFormat("0000");      // Year
  
  // Symbol colours
  lineChart.setPointColour(color(180,50,50,100));
  lineChart.setPointSize(5);
  lineChart.setLineWidth(2);
}

// Draws the chart and a title.
void draw()
{
  background(255);
  textSize(9);
  lineChart.draw(15,15,width-30,height-30);
  
  // Draw a title over the top of the chart.
  fill(120);
  textSize(20);
  text("Income per person, United Kingdom", 70,30);
  textSize(11);
  text("Gross domestic product measured in inflation-corrected $US", 
        70,45);
}
 

A scatterplot is constructed in the same way as a line chart. The only difference is that the line width is left at its default value of 0 (invisible). In the example below, the data are read from a CSV file rather than created directly from the Processing code. The other customisation options are similar to previous examples, but this time with the addtion of two axis labels:

Scatterplot with axis labels.

import org.gicentre.utils.stat.*;    // For chart classes.

// Simple scatterplot compating income and life expectancy.

XYChart scatterplot;

// Loads data into the chart and customises its appearance.
void setup()
{
  size(500,250);   
  textFont(createFont("Arial",11),11);

  // Both x and y data set here.  
  scatterplot = new XYChart(this);
 
  // Load in data from a file 
  // (first line of file contains column headings).
  String[] data = loadStrings("ukIncomeAndLifeExp.csv");
  float[] income  = new float[data.length-1];
  float[] lifeExp = new float[data.length-1];
     
  for (int i=0; i<data.length-1; i++)
  {
    String[] tokens = data[i+1].split(",");
    income[i]  = Float.parseFloat(tokens[1]);   
    lifeExp[i] = Float.parseFloat(tokens[2]); 
  }
  scatterplot.setData(income,lifeExp);
 
  // Axis formatting and labels.
  scatterplot.showXAxis(true); 
  scatterplot.showYAxis(true); 
  scatterplot.setXFormat("$###,###");
  scatterplot.setXAxisLabel("\nAverage income per person "+  
                            "(inflation adjusted $US)");
  scatterplot.setYAxisLabel("Life expectancy at birth (years)\n");

  // Symbol styles
  scatterplot.setPointColour(color(180,50,50,100));
  scatterplot.setPointSize(5);
}

// Draws the scatterplot.
void draw()
{
  background(255);
  scatterplot.draw(20,20,width-40,height-40);
}