var table;
var xaxis = [];
var yaxis = [0]; //The bar chart always start with 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('age');
  allyaxis = table.getColumn('worth in billions');
	//Unique x axis values
	totalcount = allxaxis.length;
	for (i=0,j=1;i<totalcount;i++,j++) {
			xaxis.push(allxaxis[i]);
		  yaxis.push(allyaxis[i]);
	}

	maxx = Math.max.apply(Math, xaxis);
	minx = Math.min.apply(Math, xaxis);
	maxy = Math.max.apply(Math, yaxis);
	miny = Math.min.apply(Math, 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 : Age",225,500);
  rotate(-PI/2);
  text("Y-Axis : Worth in Billions", -300, 10);
  rotate(PI/2);
		fill("purple");
		posx = map(min(xaxis), minx, maxx, 50, 450);
		text(min(xaxis), posx, 470);
		posx = map(max(xaxis), minx, maxx, 50, 450);
		text(max(xaxis), posx, 470);
		fill("orange");
		posy = map(min(yaxis), miny, maxy, 450, 50);
		text(min(yaxis),25,450);
		posy = map(max(yaxis), miny, maxy, 450, 50);
		text(max(yaxis),25,50);


	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 = 10;
    if(mouseX>posx && mouseX<posx+barwidth){
			stroke(2);
			pos_string=""+xaxis[i]+","+yaxis[j];
			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);
}