Trouble with graph

So I have 2 questions. First is how to get rid of the black on my graph line. The second is how to flip my graph line around so the highest part is on the left.

Here is my code:
PFont font;

float x1, y1, x2, y2;

int[]fireData;
int[]years;

int mostFires;
int leastFires;

void setup(){
size(500,500);
font = loadFont(“berlin30.vlw”);
textFont(font);
x1 = 40;
y1 = 90;
x2 = width- x1;
y2 = height - y1;

smooth();

//read the data table
String[] data = loadStrings(“Califires.tsv”);

fireData = new int [data.length];
years = new int [data.length];

for(int i=0; i<data.length; i++){
String[] pieces = split(data[i], “,”);

years[i] = int(pieces[0]);
fireData[i] = int(pieces[1]);
}
println(“How many years: “+years.length+””);
println(fireData);

mostFires = max(fireData);
leastFires = min(fireData);
}

void draw(){
background(11, 224, 144);

rectMode(CORNERS);
noStroke();
fill(255, 237, 223);
rect(x1, y1, x2, y2);

fill(8, 4, 4);
text(“Fires in California through the years”, x1, y1-20);

drawGraph(fireData, mostFires, leastFires, #FF1E06, “F”);

}

void drawGraph(int[] data, int yMin, int yMax, color sColor, String label){
float x=0;
float y=0;

stroke(sColor);
strokeWeight(2);

beginShape();
for(int i=0; i<data.length; i++){
x = map(i,0, data.length-1, x1, x2);
y = map(data[i], yMin, yMax, y2, y1);
vertex(x,y);
}
endShape();

if(sColor == color(#000000)){
sColor = color(#EEEEEE);
}
fill(sColor);
textAlign(LEFT);
text(label, x+10, y);
noFill();
}

First, stop drawing your graph as a shape. You shouldn’t need to use beginShape() or vertex() - just use line() to draw the lines from one data point to the next.

It’s unclear what you want to do by having the higher end of the line be on the left. Did you want to flip the graph? Draw the data in reverse order? Skew the data?

I am unclear as to what you mean draw from point to point if I am using a tsv file to draw data from

Where you get the data from doesn’t matter. What counts is that you have - somehow - an array of points. here’s an example that show what I mean by drawing lines between points.

int[] x_values = { 20, 30, 40, 50, 60, 80, 100};
int[] y_values = { 20, 40, 100, 20, 100, 80, 140 };

void setup(){
  size(600,400);
}

void draw(){
  background(0);
  stroke(255,0,0);
  for( int i = 0; i < x_values.length - 1; i++){
    line( x_values[i], y_values[i], x_values[i+1], y_values[i+1] );
  }
}

Notice that this is not drawing a PShape. It is just drawing several lines. Also notice the upper limit on the loop is one less than the arrays’ lengths, since there is no way to draw a line from the last point (where would you draw it to?).

1 Like