displaying four sets of data on one graph

I am very new to this and hoping that you would be able to help.

I'm trying to plot 4 sets of data on 1 graph from a .txt file. At the moment they are being shown separately by pressing a '[' key but ideally I would like them to be displayed on 1 and the same graph with different colour representing each set/ column. I am not sure how to modify this code to enable this.

Please, see the code and sample data below:

FloatTable data;    // Stores data
float dataMin, dataMax;     // dataMin and Max of %.

float plotX1, plotY1;
float plotX2, plotY2;
float labelX, labelY;

int rowCount;
int columnCount;
int currentColumn = 0;

int noMin, noMax;
int[]nos;

int noInterval = 1;
int volumeInterval = 5;
int volumeIntervalMinor = 1;

PFont plotFont;

void setup()
{
size(920, 500);
data = new FloatTable("AntiSocialBeh.txt");
rowCount = data.getRowCount();
columnCount = data.getColumnCount();

nos = int(data.getRowNames());
noMin = nos[0];
noMax = nos[nos.length - 1];

dataMin = 0;
dataMax = ceil(data.getTableMax() / volumeInterval) * volumeInterval;

//corners
plotX1 = 30;
plotX2 = width - 25;
labelX = 50;
plotY1 = 35;
plotY2 = height - 60;
labelY = height - 25; 

plotFont = createFont("SansSerif", 10);
textFont(plotFont);

smooth(); 
}
void draw()
{
background(224);

fill(255);
rectMode(CORNERS);
noStroke();
rect(plotX1, plotY1, plotX2, plotY2);

drawTitle();
drawAxisLabels();
drawNosLabels();
drawVolumeLabels();

stroke(255, 0, 0);
noFill();
strokeWeight(5);

drawDataHighlight(currentColumn);
drawDataPoints(currentColumn);
}

void drawTitle() { 
fill(0);
textSize(16);
textAlign(LEFT);
String title = data.getColumnName(currentColumn);
text(title, plotX1, plotY1 - 10);
}

void drawAxisLabels() {
fill(0);
textSize (10);

textAlign(CENTER);
text("Borough", (plotX1+plotX2)/2, labelY);
}

void drawNosLabels() { // = borough's labels
fill(0);
textSize(10);
textAlign(CENTER,TOP);

//draw grid
stroke(224);
strokeWeight(1);

for (int row = 0; row < rowCount; row++) {
if (nos[row] % noInterval == 0) {
float x = map(nos[row], noMin, noMax, plotX1, plotX2);
text(nos[row], x, plotY2 + 10);
line(x, plotY1, x, plotY2);
}
}
}

void drawVolumeLabels() {
fill(0);
textSize(10);
stroke(128);
strokeWeight(1);

for (float v = dataMin; v <= dataMax; v+= volumeI开发者_JS百科ntervalMinor) {
float y = map(v, dataMin, dataMax, plotY2, plotY1);
if (v % volumeInterval == 0) { //if a major tick mark
if (v == dataMin) {
  textAlign(RIGHT); //align by the bottom
}else if (v == dataMax){
  textAlign(RIGHT, TOP); // align by the top
}else {
  textAlign(RIGHT, CENTER); //center vertically
  }
text(floor(v), plotX1 - 10, y);
line(plotX1 - 4,y,plotX1, y); //draw major tick
}
}
}

//Draw data as series of points
void drawDataPoints(int col) {
int rowCount = data.getRowCount();
for (int row = 0; row < rowCount; row++) {
 if (data.isValid(row, col)) {
  float value = data.getFloat(row, col);
  float x = map(nos[row], noMin, noMax, plotX1, plotX2);
  float y = map(value, dataMin, dataMax, plotY2, plotY1);
  point(x,y);     
 } 
 }
}

void keyPressed()
 { if (key == '[') {
     currentColumn--;
     if (currentColumn < 0) {
       currentColumn = columnCount -1;
     }
   }else if (key == ']') {
     currentColumn++;
     if (currentColumn == columnCount){
       currentColumn = 0;
     }
    }
   }

This is the sample of the data- there are 33 rows representing data for a particular place (here shown as a number): in the code above the 'numbers' represent x-axis and %- y-axis. I would like to reverse it: make % x- axis and replace the numbers with the names of the places as y-axis, unfortunately I haven't got a clue how to do that.

I would be very grateful for your help.

numbers% a  % b     % c     % d
  1     39.1    45.5    52.1    29.7
  2     19.2    24.7    26.5    30
  3     26      39.8    30.3    26.3
  4     29.3    33.6    44.1    31
  5     17.1    27.2    22.9    29.1
  6     26.9    42.7    45      27.5
  7     7       39.3    11.7    53.5
  8     23.4    31.4    33.2    26.3
  9     30      40.1    39.7    27.2

Basically you want to set the line color and then call 'drawDataPoints()' for each column.

I don't know what library you are using so I don't really know how to change the line color but i would define an array of Color (one for each column) and so something like:

for (int column = 0; column < columnCount; column++) {
    strokeColor(color[i]);
    drawDataPoints(column);
}