let values2 = [20, 30, 40, 50, 60, 70, 80, 90, 100, 90]; // values for second data set

let year = 2022; // starting year

let x = 50; // x position of the graph

let y = 150; // y position of the graph

let w = 50; // width of each bar

let h1 = 0; // height of each bar for first data set

let h2 = 0; // height of each bar for second data set

let xOffset = 0; // x offset for shifting the graph

let gridWidth = 500; // width of the grid

let shiftScreen = false; // flag to shift screen

​

function setup() {

  createCanvas(600, 400);

}

​

function draw() {

  background(220);

​

  // draw x and y axis

  line(x, y, x, y - 120);

  line(x, y, x + gridWidth, y);

​

  // draw line graph for first data set

  beginShape();

  noFill();

  stroke(0, 0, 255);

  strokeWeight(2);

  for (let i = 0; i < values1.length; i++) {

    h1 = map(values1[i], 0, 100, 0, 120); // map value to height

    vertex(x + i * w - xOffset, y - h1);

  }

  endShape();

​

  // draw line graph for second data set

  beginShape();

  noFill();

  stroke(255, 0, 0);

  strokeWeight(2);

  for (let i = 0; i < values2.length; i++) {

    h2 = map(values2[i], 0, 100, 0, 120); // map value to height

    vertex(x + i * w - xOffset, y - h2);

  }

  endShape();

​

  // add new year and shift graph

  if (frameCount % 60 == 0) { // add new year every second

    values1.shift(); // remove first element from first data set

    values2.shift(); // remove first element from second data set

    values1.push(random(100)); // add new random value to first data set

    values2.push(random(100)); // add new random value to second data set

    year++; // increment year

    if (xOffset + w >= gridWidth) {

      shiftScreen = true; // set flag to shift screen

    }

    if (shiftScreen) {

      xOffset += w; // shift graph to the left

      if (xOffset >= gridWidth) {

        xOffset = 0; // reset offset

        shiftScreen = false; // reset flag

      }

    }

  }

​

  // draw year label

  textAlign(CENTER);

  textSize(32);

  text(year, width / 2, y + 50);

}

​