var table;
var xaxis = [];
var yaxis = [0];
var maxx = 0;
var minx = 0;
function preload() {
//my table is comma separated value "csv“ and has a header specifying the columns labels
	table = loadTable('billionaires.csv', 'csv','header');
}
function setup() {
//count the columns
var width = 800, height = 800, margin = 20,
	w = width - 2 * margin,
	h = height - 2 * margin;
	var columnforx = 22, columnfory = 20;
	createCanvas(width, height);

  sumarray = {};
	allxaxis = table.getColumn('year');
  allyaxis = table.getColumn('worth in billions');

	//Unique x axis values
	for (x of allxaxis) {
		if(!xaxis.includes(x)){
			xaxis.push(x);
      sumarray[x]=0;
		}
	}

  datapoints = allxaxis.length;
  for (i = 0; i < datapoints; i++){
    // print(allxaxis[i],allyaxis[i]);
    sumarray[allxaxis[i]] = sumarray[allxaxis[i]] + parseFloat(allyaxis[i]);
  }

	// print (sumarray);
	//Sum of Y-axis values
	for (x of xaxis){
		yaxis.push(sumarray[x]);
	}
  //yaxis=yaxis.slice(1);

	maxx = max(xaxis);
	minx = min(xaxis);
	maxy = max(yaxis);
	miny = min(yaxis);

	print("Maxx="+maxx+" Minx="+minx);
	print("Maxy="+maxy+" Miny="+miny);
  // noLoop();
}

function draw(){
	background(255);
  xstart = 50;
  xend = 450;
  ystart = 50;
  yend = 450;
  fill("grey");

	for(i = xstart; i <= xend; i++){
    if(i % 100 == 0 ){
      line(i, yend, i, xstart);
    }
  }

  for(i = ystart; i <= yend; i++){
    if(i % 100 == 0){
      line(xstart, i, xend, i);
    }
  }

  fill("black");
  stroke(2);
	line(xstart, yend, 50, 50); //Y-axis
	line(50, 450, 450, 450); //X-axis
  fill("black");
  text("X-Axis : Year", 225, 500);
  rotate(-PI/2);
  text("Y-Axis : Total Worth in Billions", -300, 10);
  rotate(PI/2);

	for (x of xaxis){
		posx = map(x, minx, maxx, 50, 450);
		fill(50);
		text(x, posx, 470);
	}

	for (y of yaxis){
    posy = map(y, miny, maxy, 450, 50);
    text(y.toFixed(), 0, posy);
  }

	for (i = 0, j=1;  i< xaxis.length; i++, j++){
		fill("pink");
		posx = map(xaxis[i], minx, maxx, 50, 450);
		posy = map(yaxis[j], miny, maxy, 450, 50);
		nextposx = map(xaxis[i+1], minx, maxx, 50, 450);
		nextposy = map(yaxis[j+1], miny, maxy, 450, 50);
    if (posy == 0){
      posy = 50;
    }
		var barsize = int(dist(posx, posy,  posx, 450));
		var barwidth = 20;
    if(mouseX > posx && mouseX < posx+barwidth){
			stroke(2);
			pos_string = "" + xaxis[i] + "," + yaxis[j].toFixed();
			text(pos_string, posx, posy);
			stroke(1);
      // print(mouseX,mouseY,posx,posx+barwidth,posy,barsize);
    }else{
      fill("pink");
			stroke(2);
    }
		line(posx, posy, nextposx, nextposy);
		// box=rect(posx, posy, barwidth, barsize);
    fill("blue");
    ellipse(posx,posy,5,5);
	}

  fill("green");
  ellipse(mouseX, mouseY, 10, 10);
}