let dataInput;

let categoriesInput;

let submitButton;

let selectMenu;

let chart;

let TextPosition;

let rectX 

let rectY 

let rectW 

let rectH 

​

​

​

function setup() 

{

  createCanvas(windowWidth, windowHeight);

​

// Input fields for data and categories to create and label graphs

// createInput function taken from https://p5js.org/reference/p5/createInput/ 

// createP and  taken from https://p5js.org/reference/p5/createP/

  let TextTitle1 = createP("Enter data values (comma separated):");

  TextTitle1.position(windowWidth * 0.4, windowHeight * 0.05 - 40);

  dataInput = createInput("20, 40, 60, 80, 100");

  dataInput.position(windowWidth * 0.4, windowHeight * 0.05);

​

  let TextTitle2 = createP("Enter categories (comma separated):");

  TextTitle2.position(windowWidth * 0.03, windowHeight * 0.05 - 40);

  categoriesInput = createInput("A, B, C, D, E");

  categoriesInput.position(windowWidth * 0.03, windowHeight * 0.05);

​

// Drop down menu for selecting graph type 

// createSelect taken from https://p5js.org/reference/p5/createSelect/

  TextPosition = createP("Select chart type:");

  TextPosition.position(windowWidth * 0.8, windowHeight * 0.05 - 40);

  selectMenu = createSelect();

  selectMenu.position(windowWidth * 0.8, windowHeight * 0.05);

  selectMenu.option('Pie Chart');

  selectMenu.option('Bar Graph');

  selectMenu.option('Line Graph');

  selectMenu.option('Scatterplot');

​

// Submit button to generate chart

  submitButton = createButton("Generate Graph");

  submitButton.position(windowWidth * 0.8, windowHeight * 0.07);

  submitButton.mousePressed(generateChart);

​

  chart = null;

}

​

function draw() 

{

// Rectangular background for graphs

  rectX = windowWidth * 0.2;

  rectY = windowHeight * 0.2;

  rectW = windowWidth * 0.7;

  rectH = windowHeight * 0.7;

  background(222);

  line(0,windowHeight * 0.15, windowWidth, windowHeight * 0.15 )

  fill(255);

  stroke(122,122,122)

  strokeWeight(2)

  rect(rectX-15, rectY, rectW+30, rectH+20);

​

// Check and update graph type

  if (chart) {

    chart.display();

  }

}

​

// Function to check graph type and generate graph

function generateChart() 

{

  let data = dataInput.value().split(',').map(Number);

  let categories = categoriesInput.value().split(',');

​

  let chartType = selectMenu.value();

// Create the appropriate graph based on selection

  if (chartType === 'Pie Chart') {

    chart = new PieChart(data, categories);

  } else if (chartType === 'Bar Graph') {

    chart = new BarGraph(data, categories);

  } else if (chartType === 'Line Graph') {

    chart = new LineGraph(data, categories);

  } else if (chartType === 'Scatterplot') {

    chart = new Scatterplot(data, categories);

  }

}

​

​

class PieChart 

{

  constructor(data, categories) 

  {

    this.data = data;

    this.categories = categories;

    this.total = 0;

// Get sum of all data 

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

    {

      this.total += data[i]

    }

    this.colors = [];

    for (let i = 0; i < this.data.length; i++) 

    {

// Generate a unique color for each data section

      this.colors.push(color(random(255)%200, random(255), random(255)));

    }

  }

  display() 

  {

    let angleStart = 0;

    let radius = min(rectW, rectH) * 0.4; 

    let centerX = rectX + rectW / 2;

    let centerY = rectY + rectH / 2;

​

    for (let i = 0; i < this.data.length; i++) 

    {

      let angleEnd = angleStart + (this.data[i] / this.total) * TWO_PI;

      fill(this.colors[i]);

      arc(centerX, centerY, radius * 2, radius * 2, angleStart, angleEnd, PIE);

// Get positions for Categories lables 

      let midAngle = angleStart + (angleEnd - angleStart) / 2;

      let labelX = centerX + cos(midAngle) * (radius * 0.5); 

      let labelY = centerY + sin(midAngle) * (radius * 0.5);

​

      fill(0);  

      textAlign(CENTER, CENTER); 

      text(this.categories[i], labelX, labelY); 

      fill(0);  

      textAlign(CENTER, CENTER);  

      text(this.categories[i], labelX, labelY);

      angleStart = angleEnd;

    }

  }

}

​

class BarGraph 

{

  constructor(data, categories) 

  {

    this.data = data;

    this.categories = categories;

  }

​

  display() 

  {

// Calculate width of bars and Maximum values of data

    let barWidth = rectW / this.data.length;

    let maxValue = max(this.data)+1;

// Draw Bars one by one 

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

      let barHeight = map(this.data[i], 0, maxValue, 0, rectH);

      fill(100, 150, 255);

      rect(rectX + i * barWidth, rectY + rectH - barHeight, barWidth - 10, barHeight);

      fill(0);

      textAlign(CENTER);

      text(this.categories[i], rectX + i * barWidth + barWidth / 2, rectY + rectH + 15);

    }

  }

}

​

class LineGraph 

{

  constructor(data, categories) 

  {

    this.data = data;

    this.categories = categories;

  }

​

   display() 

  {

    stroke(0);

    fill(0);

    let maxValue = max(this.data);

    let prevX, prevY;

​

    for (let i = 0; i < this.data.length; i++) 

    {

      let x = map(i, 0, this.data.length - 1, rectX, rectX + rectW);

      let y = map(this.data[i], 0, maxValue, rectY + rectH, rectY);

​

// Circles for Data points 

      ellipse(x, y, 8, 8); 

​

// Draw the category labels

      textAlign(CENTER);

      text(this.categories[i], x, rectY + rectH + 15);

​

// Connect points with lines

      if (i > 0) 

      {

        line(prevX, prevY, x, y); 

      }

​

// Update previous point

      prevX = x;

      prevY = y;

    }

  }

}

​

class Scatterplot 

{

  constructor(data, categories) 

  {

    this.data = data;

    this.categories = categories;

  }

​

  display() 

  {

    let maxValue = max(this.data);

​

    for (let i = 0; i < this.data.length; i++) 

    {

// Determine how high or low point should be 

      let y = rectY + rectH - ((this.data[i] / maxValue) * rectH);

      let x = rectX + ((i / (this.data.length - 1)) * rectW);

      fill(0);

      ellipse(x, y, 10, 10);

      fill(0);

      text(this.categories[i], x, y - 10);

    }

  }

}

​

​

// Resize canvas if window size changes

function windowResized() 

{

  resizeCanvas(windowWidth, windowHeight);

}

​