re-sizable bar graph/line graph using variable data
in
Programming Questions
•
8 months ago
Hello All,
I'm incredibly new to writing code & processing and really have no idea what I'm doing.
I am trying to create a bar graph using data from a csv file. It needs to accommodate changing data (both in the amount of data and the scale of it - from decimals to the tens of thousands). Also, the width of the bars & spacing between them need to be proportional to the amount of data and a resized frame. This means I can't code in hard values for the width of the rectangles or spacing between them. I believe this also means I can't use a scaling factor to better display the heights of the bars because the data could be replaced with much larger or smaller numbers. I will include what I've coded so far.
My questions are:
How do I get tick marks to indicate the scale along the y-axis? (I'd be interested in being able to accommodate increments as small as 2.5 or as big as 2500)
When I read in different csv files that have different numbers of lines of data, the margins change on the left and right of the image. How can I code the bar graph to always be centered? ( I had to add in a weird amount to offset the first rectangle from the left margin. I would like to be able to do this differently.
I also need to be able to toggle between bar graph view and a line graph that has connected nodes depicting the same data. I have a little bug when clicking on the button, the text disappears even though it is after (ie. "above") the rectangle in the else{ block.
How can I get the data to take up an appropriate amount of screen space vertically no matter what scale the data is at?
How and in which block do I code the line graph option? Do I need to read all the data in again?
Any other pointers for me? I know this might look messy but this is only the second thing I've ever coded. Thank you in advance for any assistance you can provide
Boolean barGraphButton = true;
// create array for data
int[] numbers;
void setup(){
size(600,500);
smooth();
frame.setResizable(true);
// load data from csv file
String[] lines = loadStrings("data.csv");
//use number of columns to set length
numbers = new int[lines.length];
for (int i=0; i<lines.length; i++) {
//split into 2 strings
String[] tokens = splitTokens(lines[i], ",");
// put 2nd string into int array
numbers[i] = int(tokens[1]);
}
}
void draw() {
background(255);
fill(26, 129, 13);
//set bar width according to # of rows of data
float w = (float) ((width/numbers.length)*.95);
//set height of bars
for (int i=0; i<numbers.length; i++) {
float h = numbers[i];
rect((i*w)+w/2.9, height - (h+40), w*.85, h);
}
// Title Text
textSize(24);
textAlign(CENTER);
fill(0);
text("Annual Income 2002-2013", width/2, height/6);
//create Toggle Button to display bar or line graph
color C1 = color(#E3DC10);
color C2 = color(#550183);
if (barGraphButton){
fill(C1);
rect(width*.8, height/25, 100, 25);
//text during bar graph view
textSize(10);
fill(0);
text("switch to line view", width*.8+50, height/25+13);
}else{
fill(C1);
rect(width*.8, height/25, 100, 25);
textSize(10);
text("switch to bar view", width*.8+50, height/25+13);
}
}
void mouseClicked() {
// click from Bar graph to Line graph
if (barGraphButton) {
if (mouseX > width*.8 && mouseX < (width*.8)+100 && mouseY > height/25 && mouseY < height/25+25){
barGraphButton = false;
}
}else{
// Click from Line graph to Bar graph
if (mouseX > width*.8 && mouseX < (width*.8)+100 && mouseY > height/25 && mouseY < height/25+25){
barGraphButton = true;
}
}
}
2
