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);
}