1

I'm currently working on a Stacked Bar Chart Demo using p5JavaScript as you can see in the Code Snippet Below.

Basically, I want to have 2 series of data on X&Y Axis :

1) An array of numbers (var)

and

2) An Array-List of variables (var1,var2,var3,...).

The only reference I found for this is the link provided below: https://sites.google.com/site/processingp5js/data-structures/arraylist

If somebody know how to create a "Class of Objects" or an Array-List please let me know.

The Script is shown below :

//REFERENCES:
//   https://sites.google.com/site/processingp5js/data-structures/arraylist

/* Needed Variables Declaration */
var arrayOfMonths = ["dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy","dd/mm/yy"];
var arrayOfResponses = ["num","num","num","num","num","num","num"];

/* Calculated Variables */
var numOfMonths = arrayOfMonths.length;
var numOfResponses = arrayOfResponses.length;

/* Variables Declaration */
var canvasWidth = numOfMonths * 100;
var canvasHeight = numOfResponses * 100;

function setup() {
  createCanvas(canvasWidth, canvasHeight);
} 

function draw() {
  background(255); //White Background Color
 chartBase(); //Add X,Y Axis
  addPointers(numOfResponses, numOfMonths); //Add Pointers
  addTextToPointers(); //Add Text to pointers
  //addValues(); //Add the Bars (Values) of the Chart
}

function chartBase(){
  
  /* DRAW X AXIS */
  line(canvasWidth-(canvasWidth-50), canvasHeight-100,
       (canvasWidth-50)+25, canvasHeight-100);
  
  /* DRAW Y AXIS */
 line(canvasHeight-(canvasHeight-100),canvasHeight-(canvasHeight-50)-25,
       canvasHeight-(canvasHeight-100),canvasHeight-50); 
}

function addPointers(numOfResponses, numOfMonths){
  
  var spaceBetweenX = canvasWidth - (canvasWidth-150);
 var spaceBetweenY = canvasHeight- 150;
  
  /* ADD POINTERS TO X AXIS */
  for(var x=0; x<numOfMonths; x++){
    
   ellipse(spaceBetweenX,canvasHeight-100,10,10);
    spaceBetweenX += canvasWidth/numOfMonths;
  }
  
  /* ADD POINTERS TO Y AXIS */
  for(var y=0; y<numOfResponses; y++){
    
   ellipse(canvasWidth-(canvasWidth-100), spaceBetweenY, 10, 10);
    spaceBetweenY -= canvasHeight/numOfResponses;
  }
  
}

function addTextToPointers(){

  var spaceBetweenX = canvasWidth-(canvasWidth-125);
 var spaceBetweenY=(canvasHeight-100)-50;
  textSize(13);
  
  /* ADD TEXT TO X AXIS */
  for(var x=0; x<numOfMonths; x++){
    
   var currentText = arrayOfMonths[x];
    text(currentText, spaceBetweenX, (canvasHeight-75));
    spaceBetweenX+=canvasWidth/numOfMonths;
  }
  
  /* ADD TEXT TO Y AXIS */
  for(var y=0; y<numOfResponses; y++){
  
    var currentText = arrayOfResponses[y];
    text(currentText, (canvasWidth-(canvasWidth-60)), spaceBetweenY);
    spaceBetweenY -= canvasHeight/numOfResponses;
  }
}
html, body {
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>
Loizos Vasileiou
  • 674
  • 10
  • 37

1 Answers1

0

Just use an array.

Arrays in JavaScript act a lot like the ArrayList class in Java or Processing. Their size can change, and you can dynamically add or remove elements from them.

Check out W3Schools or MDN for tutorials on arrays in JavaScript, or just google "javascript arrays" for a ton of results.

Kevin Workman
  • 41,537
  • 9
  • 68
  • 107