jo6gauri/barChart.js

## barChart.js
var Width = 1200;
var Height = 800;
var values = [];
var startX = 150;
var startY = 700;
var sizeofBarChart = 600;
var table;

function preload() {
    table = loadTable("health_summary.csv", "csv");
}

function setup() {
    createCanvas(Width, Height);
}

function draw() {
    background(255);
    drawBarChart()
}

function drawBarChart() {
    var maxValue = 0;
    for (var i = 1; i < 2; i++) {
        var column = table.getColumn(i).slice(1, table.getColumn(0).length);
        column = column.map(function (num) {
            return parseFloat(num);
        });
        values.push(column);
    }
    maxValue = Math.max.apply(Math, values[0]);
    var barWidth = 0.8 * sizeofBarChart / (table.getRowCount() * 2);
    drawAxes();
    stroke(0, 0, 0);
    strokeWeight(1);
    fill(0, 0, 0);
    textSize(20);
    text("Bar Chart for Health Summary", width / 2 - 275, 120);
    fill(0, 0, 0);
    stroke(0, 0, 0);
    text(table.getString(0, 1), startX - 40, startY - 525);
    fill(0, 0, 0);
    stroke(0, 0, 0);
    text(table.getString(0, 0), startX + 495, startY + 20);
    var YAxisScale = 0;
    textSize(15);
    var tickGap = 0;
    for (var i = 0; i < 5; i++) {
        line(startX, startY - tickGap, startX - 5, startY - tickGap);
        text(YAxisScale, startX - 50, startY - tickGap);
        tickGap += 120;
        YAxisScale += int(maxValue / 4);
    }
    for (var i = 1; i < table.getRowCount(); i++) {
        var data = table.getNum(i, 1);
        if ((mouseX > startX + i * 2 * barWidth && mouseY > startY - (data / maxValue) * (sizeofBarChart * 0.8))
            && mouseX < startX + i * 2 * barWidth + barWidth
            && mouseY < startY) {
            text(table.getString(i, 0) + " : " + data, mouseX + 10, mouseY - 5);
            fill(230, 138, 0);
        } else {
            fill("steelblue");
        }
        rect(startX + i * 2 * barWidth, startY, barWidth, -(data / maxValue) * (sizeofBarChart * 0.8));
        textSize(15);
        fill(0, 0, 0);
        stroke(0, 0, 0);
        text(table.getString(i, 0), startX + i * 2 * barWidth, startY + 20);
    }
}

function drawAxes() {
    strokeWeight(1);
    fill(0, 0, 0);
    var x1 = startX;
    var x2 = startX;
    var y1 = startY;
    var y2 = y1 - 500;
    line(x1, y1, x2, y2);
    x1 = startX;
    x2 = x1 + 475;
    y1 = startY;
    y2 = startY;
    line(x1, y1, x2, y2);
}


## health_summary.csv

          
            Year
            Number_of_Affected_People

            
              2000
              14860

            
              2001
              13494

            
              2002
              15813

            
              2003
              13718

            
              2004
              23283

            
              2005
              25665

            
              2006
              13188

            
              2007
              9242

            
              2008
              8784

            
              2009
              10520

            
              2010
              18172

            
              2011
              12202

## index.html
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
        <script src="barChart.js"></script>
    </head>
    <body>
    </body>
</html>
	var Width = 1200;
	var Height = 800;
	var values = [];
	var startX = 150;
	var startY = 700;
	var sizeofBarChart = 600;
	var table;

	function preload() {
	table = loadTable("health_summary.csv", "csv");
	}

	function setup() {
	createCanvas(Width, Height);
	}

	function draw() {
	background(255);
	drawBarChart()
	}

	function drawBarChart() {
	var maxValue = 0;
	for (var i = 1; i < 2; i++) {
	var column = table.getColumn(i).slice(1, table.getColumn(0).length);
	column = column.map(function (num) {
	return parseFloat(num);
	});
	values.push(column);
	}
	maxValue = Math.max.apply(Math, values[0]);
	var barWidth = 0.8 * sizeofBarChart / (table.getRowCount() * 2);
	drawAxes();
	stroke(0, 0, 0);
	strokeWeight(1);
	fill(0, 0, 0);
	textSize(20);
	text("Bar Chart for Health Summary", width / 2 - 275, 120);
	fill(0, 0, 0);
	stroke(0, 0, 0);
	text(table.getString(0, 1), startX - 40, startY - 525);
	fill(0, 0, 0);
	stroke(0, 0, 0);
	text(table.getString(0, 0), startX + 495, startY + 20);
	var YAxisScale = 0;
	textSize(15);
	var tickGap = 0;
	for (var i = 0; i < 5; i++) {
	line(startX, startY - tickGap, startX - 5, startY - tickGap);
	text(YAxisScale, startX - 50, startY - tickGap);
	tickGap += 120;
	YAxisScale += int(maxValue / 4);
	}
	for (var i = 1; i < table.getRowCount(); i++) {
	var data = table.getNum(i, 1);
	if ((mouseX > startX + i * 2 * barWidth && mouseY > startY - (data / maxValue) * (sizeofBarChart * 0.8))
	&& mouseX < startX + i * 2 * barWidth + barWidth
	&& mouseY < startY) {
	text(table.getString(i, 0) + " : " + data, mouseX + 10, mouseY - 5);
	fill(230, 138, 0);
	} else {
	fill("steelblue");
	}
	rect(startX + i * 2 * barWidth, startY, barWidth, -(data / maxValue) * (sizeofBarChart * 0.8));
	textSize(15);
	fill(0, 0, 0);
	stroke(0, 0, 0);
	text(table.getString(i, 0), startX + i * 2 * barWidth, startY + 20);
	}
	}

	function drawAxes() {
	strokeWeight(1);
	fill(0, 0, 0);
	var x1 = startX;
	var x2 = startX;
	var y1 = startY;
	var y2 = y1 - 500;
	line(x1, y1, x2, y2);
	x1 = startX;
	x2 = x1 + 475;
	y1 = startY;
	y2 = startY;
	line(x1, y1, x2, y2);
	}
	Year	Number_of_Affected_People
	2000	14860
	2001	13494
	2002	15813
	2003	13718
	2004	23283
	2005	25665
	2006	13188
	2007	9242
	2008	8784
	2009	10520
	2010	18172
	2011	12202
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
	<script src="barChart.js"></script>
	</head>
	<body>
	</body>
	</html>