let cwidth = 840;

let cheight = 450;

let offsetWidth = 720;

let offsetHeight = 330;

let totalRow;

let params = [];

​

let period;

let gstyle;

​

let date;

let open;

let high;

let low;

let close;

let adjClose;

let volume;

​

// Default Draw;

let defaultDraw;

​

// all preriods, eighties, nineties, noughties, twenty-tens

let allPeriods;

let eighties;

let nineties;

let noughties;

let twentyTens;

​

function preload() {

  table = loadTable('N225.csv', 'csv', 'header');

}

​

function setup() {

​

  createCanvas(cwidth, cheight);

​

  totalRow = table.getRowCount();

​

  background(255);

​

  date = table.getColumn('Date');

  open = table.getColumn('Open');

  high = table.getColumn('High');

  low = table.getColumn('Low');

  close = table.getColumn('Close');

  adjClose = table.getColumn('Adj Close');

  volume = table.getColumn('Volume');

​

  textAlign(CENTER);

​

  push();

  strokeWeight(1);

  text('Graph style', 45, 20);

  pop();

​

  gstyle = createSelect();

  gstyle.position(85, 5);

  gstyle.option('normal');

  gstyle.option('bar');

  gstyle.changed(toggleDuration);

  push();

  strokeWeight(1);

  text('Date range', 190, 20);

  pop();

​

  period = createSelect();

  period.position(230, 5);

  period.option('from 1985 to 2019');

  period.option('1980\'s');

  period.option('1990\'s');

  period.option('2000\'s');

  period.option('2010\'s');

  period.changed(toggleDuration);

​

  // Default Draw

  defaultDraw = new DrawGraph('normal', 1, 1984, 2019, true);

  defaultDraw.display();

}

​

function toggleDuration() {

  background(255);

  push();

  text('Graph style', 45, 20);

  text('Date range', 190, 20);

  pop();

  let item = period.value();

​

  switch (item) {

    case 'from 1985 to 2019':

      allPeriods = new DrawGraph(gstyle.value(), 1, 1984, 2019, true);

      allPeriods.display();

      break;

    case '1980\'s':

      eighties = new DrawGraph(gstyle.value(), 6, 1984, 1989, false);

      eighties.display();

      break;

    case '1990\'s':

      nineties = new DrawGraph(gstyle.value(), 3, 1990, 1999, false);

      nineties.display();

      break;

    case '2000\'s':

      noughties = new DrawGraph(gstyle.value(), 3, 2000, 2009, false);

      noughties.display();

      break;

    case '2010\'s':

      twentyTens = new DrawGraph(gstyle.value(), 3, 2010, 2019, false);

      twentyTens.display();

      break;

  }

}

​

class DrawGraph{

    constructor(graphStyle, scale, start, end, all){

        this.offset = (cwidth - offsetWidth) / 2;

        this.numArray = [];

        this.graphStyle = graphStyle;

        this.scale = scale;

        this.start = start;

        this.end = end;

        this.all = all;

        this.params = [];

    }

    display(){

        for (let i = 0; i < totalRow; i++) {

            if (table.getColumn('Date')[i] != 'null'){

                let spritString = split(table.getColumn('Date')[i], '-');

                let check = int(spritString[0]);

​

                if (check >= this.start && check <= this.end){

                    if(high[i] != 'null'){

                        this.numArray.push(int(high[i]));

                    }

​

                    this.offset += (offsetWidth / totalRow) * this.scale;

​

                    // change style

                    if (this.graphStyle == 'bar'){

                        push();

                        strokeWeight(0.1);

                        stroke(0,0,255);

                        noFill();

                        rect(this.offset, cheight - (close[i] * 0.01), 0.05, (close[i] * 0.01) - ((cheight - offsetHeight) / 4));

                        pop();

                    } else {

                        push();

                        strokeWeight(0.1);

                        stroke(0,0,255);

                        point(this.offset, cheight - (low[i] * 0.01), this.offset, cheight - (high[i] * 0.01));

                        pop();

                    }

​

​

                    if ((spritString[1] == '01' && spritString[2] == '01') || (spritString[1] == '01' && spritString[2] == '02') || (spritString[1] == '01' && spritString[2] == '03') || (spritString[1] == '01' && spritString[2] == '04') || (spritString[1] == '01' && spritString[2] == '05') || (spritString[1] == '01' && spritString[2] == '06')){

                        let templist = [check, this.offset];

                        this.params.push(templist);

                    }

                }

            }

        }

​

        // period.

        for(let i = this.start; i <= this.end; i++){

            for(let j = 0; j < this.params.length; j++){

                if (this.params[j][0] == i){

                    if (this.all){

                        if ((this.params[j][0] - 1984) % 5 == 0 ){

                            push();

                            stroke(0);

                            strokeWeight(0.1);

                            pop();

                            push();

                            line(this.params[j][1], cheight - ((cheight - offsetHeight) / 4), this.params[j][1], ((cheight - offsetHeight) / 4));

                            textStyle(ITALIC);

                            text(this.params[j][0], this.params[j][1], cheight - ((cheight - offsetHeight) / 12));

                            pop();

                            break;

                        }

                    } else {

                        push();

                        stroke(0);

                        strokeWeight(0.1);

                        line(this.params[j][1], cheight - ((cheight - offsetHeight) / 4), this.params[j][1], ((cheight - offsetHeight) / 4));

                        pop();

                        push();

                        textStyle(ITALIC);

                        text(this.params[j][0], this.params[j][1], cheight - ((cheight - offsetHeight) / 12));

                        pop();

                        break;

                    }

                }

            }

        }

​

        push();

        stroke(0);

        strokeWeight(1);

        // value

        line((cwidth - offsetWidth) / 4, (cheight - offsetHeight) / 4, (cwidth - offsetWidth) / 4, cheight - ((cheight - offsetHeight) / 4));

        // date

        line((cwidth - offsetWidth) / 4, cheight - ((cheight - offsetHeight) / 4), cwidth - ((cwidth - offsetWidth) / 4), cheight - ((cheight - offsetHeight) / 4));

        pop();

        // max

        let maxVal = max(this.numArray);

        push();

        stroke(255,0,0);

        strokeWeight(0.1);

        line((cwidth - offsetWidth) / 4, cheight - (maxVal * 0.01), cwidth - ((cwidth - offsetWidth) / 4), cheight - (maxVal * 0.01));

        textSize(9);

        strokeWeight(1);

        fill(255,0,0);

        text(maxVal, (cwidth - offsetWidth) / 8, cheight - (maxVal * 0.01));

        pop();

        for(let i = 0; i <= 12*3000; i+=3000){

            push();

            stroke(0);

            strokeWeight(0.1);

            line((cwidth - offsetWidth) / 4, cheight - (i * 0.01), cwidth - ((cwidth - offsetWidth) / 4), cheight - (i * 0.01));

            pop();

            push();

            textSize(9);

            strokeWeight(1);

            fill(0);

            text(i, (cwidth - offsetWidth) / 8, cheight - i * 0.01);

            pop();

        }

​

        // min

        let minVal = min(this.numArray);

        push();

        stroke(255,0,0);

        strokeWeight(1);

        line((cwidth - offsetWidth) / 4, cheight - (minVal * 0.01), cwidth - ((cwidth - offsetWidth) / 4), cheight - (minVal * 0.01));

        textSize(9);

        strokeWeight(1);

        fill(255,0,0);

        text(minVal, (cwidth - offsetWidth) / 8, cheight - (minVal * 0.01));

        pop();

        }

}