var table;
var fontBold;
var Width = 1200;
var Height = 800;
var values = [];
var startX = 150;
var startY = 700;
var lineChartSize = 600;

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

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

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

function drawLine() {
    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]);
    fill(0, 0, 0);
    textSize(15);
    drawAxes();
    text(table.getString(0, 0), startX + lineChartSize - 120, startY + 30);
    text(table.getString(0, 1), startX - 30, startY - lineChartSize + 70);
    var YAxisScale = 0;
    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);
    }
    fill(0, 0, 0);
    textSize(25);
    text("Line Chart for Summary of Hepatitis A patients", Width / 2 - 275, 90);
    textSize(15);
    var radius = lineChartSize / 40;
    var lineWidth = 0.8 * lineChartSize / (table.getRowCount() * 2);
    var endX = startX + 2 * lineWidth;
    var endY = startY - (table.getNum(1, 1) / maxValue) * (lineChartSize * 0.8);
    for (var i = 1; i < table.getRowCount(); i++) {
        var data = table.getNum(i, 1);
        var x = startX + i * 2 * lineWidth;
        var y = startY - (table.getNum(i, 1) / maxValue) * (lineChartSize * 0.8);
        if (sq(mouseX - x) + sq(mouseY - y) < radius) {
            fill(230, 138, 0);
            text(table.getString(i, 0) + " : " + table.getNum(i, 1), mouseX + 10, mouseY - 5);
        } else {
            fill("steelblue");
        }
        ellipse(x, y, radius, radius);
        line(endX, endY, x, y);
        endX = x;
        endY = y;
        line(x, startY, x, startY + 5);
        fill(0, 0, 0);
        text(table.getString(i, 0), x - 15, 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);
}