var table;
var xaxis = [];
var yaxis = [0]; //The bar charts 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('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;
	// datapoints = 5;
  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;

	// Grid lines display
  fill("grey");
	tint(255, 127);  // Display at half opacity
  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

	//Labels for both the axis
  fill("black");
  text("X-Axis : Year", 225, 500);
  rotate(-PI/2);
  text("Y-Axis : Total Worth in Billions", -300, 10);
  rotate(PI/2);

	//Mapping values of axes on the line
	for (x of xaxis){
		posx = map(x, minx, maxx, 70, 450);
		text(x, posx, 470);
	}

	// for (var i = 0; i < yaxis.length; i++){
  //   posy = map(i, miny, maxy, 450, 50);
  //   text(i, 10, posy);
  // }
	for (y of yaxis) {
    posy = map(y, miny, maxy, 450, 50);
    text(y.toFixed(), 0, posy);
  }

	//To display the pink bars
	for (i = 0, j = 1;  i< xaxis.length; i++, j++){
		fill("pink");
		posx = map(xaxis[i], minx, maxx, 70, 450);
		posy = map(yaxis[j], miny, maxy, 450, 0);
    if (posy == 0){
      posy = 50;
  	}

		//Hovering the mouse
		var barsize = int(dist(posx, posy,  posx, 450));
		var barwidth = 20;
    if( mouseX > posx && mouseX < posx+barwidth){
			fill("black");
			pos_string = "" + xaxis[i] + "," + yaxis[j].toFixed();
			text(pos_string, posx, posy);
			fill("red");
      // print(mouseX,mouseY,posx,posx+barwidth,posy,barsize);
    }else {
      fill("pink");
      // print(mouseX,mouseY,posx,posx+barwidth,posy,barsize);
    }

		box = rect(posx, posy, barwidth, barsize);
    fill("blue");
    ellipse(posx, posy, 5, 5);
	}

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