Generate a random color using Javascript on every page load

Question

Generate a random color using Javascript on every page load

Using JavaScript, I am dynamically creating a graph based on a Bootstrap template.

This particular graph displays various appointment types and their corresponding values.

try {
    //bar chart
    var ctx = document.getElementById("ReferralTypeWeekly");
    if (ctx) {
      ctx.height = 200;
      var myChart = new Chart(ctx, {
        type: 'bar',
        defaultFontFamily: 'Poppins',
        data: {
          labels: ["Apt Type 1", "Apt Type 2", "Apt Type 3", "Apt Type 4", "Apt Type 5", "Apt Type 6", "Apt Type 7", "Apt Type 8", "Apt Type 9", "Apt Type 10", "Apt Type 11"],
          datasets: [
            {
              label: "Week 06",
              data: [7, 31, 47, 41, 10, 42, 3, 19, 16, 24, 0, 26],
              borderColor: "rgba(0, 123, 255, 0.9)",
              borderWidth: "0",
              backgroundColor: "rgba(0, 123, 255, 0.5)",
              fontFamily: "Poppins"
            },
            {
              label: "Week 07",
              data: [10, 67, 112, 57, 21, 39, 9, 23, 30, 26, 9, 54],
              borderColor: "rgba(0,0,0,0.09)",
              borderWidth: "0",
              backgroundColor: "rgba(123, 255, 0,0.5)",
              fontFamily: "Poppins"
            },
            {
              label: "Week 08",
              data: [4, 47, 93, 58, 21, 29, 6, 10, 32, 30, 6, 33],
              borderColor: "rgba(0,0,0,0.09)",
              borderWidth: "0",
              backgroundColor: "rgba(255, 0, 123,0.5)",
              fontFamily: "Poppins"
            }
          ]
        },
        options: {
          legend: {
            position: 'top',
            labels: {
              fontFamily: 'Poppins'
            }

          },
          scales: {
            xAxes: [{
              ticks: {
                fontFamily: "Poppins"

              }
            }],
            yAxes: [{
              ticks: {
                beginAtZero: true,
                fontFamily: "Poppins"
              }
            }]
          }
        }
      });
    }


  } catch (error) {
    console.log(error);
  }

In the code snippet where it references:

borderColor: "rgba(0, 123, 255, 0.9)",

and

backgroundColor: "rgba(0, 123, 255, 0.5)",

I wish to generate these colors randomly from a predefined list, ensuring each set has a unique color but maintains consistency between borderColor and backgroundColor for each value.

Despite researching, I am unsure how to implement this feature.

Some of my other graphs involve multiple datasets (more than just two like in this example).

I eagerly await any suggestions on how to proceed.

Cheers!

UPDATE : CHECK OUT THIS IMAGE OF THE GRAPH https://i.sstatic.net/jeKyz.png

javascript colors

Answer 1

Answer №1

If you're looking to generate random colors from a predefined list, you can use the `splice` method on the array at a random index:

var predefinedList = ["0,0,0", "255,255,255", "255,0,0", "0,255,0", "128,128,128", "0,128,0"];

function getRandomColor() {
  return predefinedList.splice(Math.floor(Math.random() * predefinedList.length), 1)[0];
}

document.querySelector("#test").addEventListener("click", function() {
  console.log(getRandomColor());
});

To add more random values and create up to 256 unique colors in the `predefinedList`, you can follow this approach:

var start = Date.now();

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function getIndex(val, index) {
  return index;
}

var r = fillArray(256, getIndex);
var g = fillArray(256, getIndex);
var b = fillArray(256, getIndex);

var predefinedList = fillArray(256, function() {
  return [r, g, b].map(function(color) {
    return color.splice(Math.floor(Math.random() * color.length), 1)[0];
  }).join(",");
});

console.log("Milliseconds elapsed: " + (Date.now() - start));

console.log(predefinedList);

You can combine both methods to get an array of randomized RGB colors:

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function getIndex(val, index) {
  return index;
}

var r = fillArray(256, getIndex);
var g = fillArray(256, getIndex);
var b = fillArray(256, getIndex);

var predefinedList = fillArray(256, function() {
  return `rgb(${[r, g, b].map(function(color) {
    return color.splice(Math.floor(Math.random() * color.length), 1)[0];
  }).join(",")})`;
});


function getRandomColor() {
  return predefinedList.splice(Math.floor(Math.random() * predefinedList.length), 1)[0];
}

var container = document.querySelector("#container");
var color = getRandomColor();

while (color){
  var newDiv = document.createElement("div");
  newDiv.setAttribute("style", `background-color: ${color};`);
  container.appendChild(newDiv);
  color = getRandomColor();
}

In addition, you can create arrays for `r`, `g`, and `b` with custom indexing functions like this:

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function createIndexFunction(start, multiplier) {
  return function(val, index) {
    return start + index * multiplier;
  }
}

var r = fillArray(26, createIndexFunction(0, 10));
var g = fillArray(26, createIndexFunction(200, 1));
var b = fillArray(26, createIndexFunction(50, 5));

console.log(r);
console.log(g);
console.log(b);

Answer 2

If you're looking to generate random colors from a predefined list, you can use the `splice` method on the array at a random index:

var predefinedList = ["0,0,0", "255,255,255", "255,0,0", "0,255,0", "128,128,128", "0,128,0"];

function getRandomColor() {
  return predefinedList.splice(Math.floor(Math.random() * predefinedList.length), 1)[0];
}

document.querySelector("#test").addEventListener("click", function() {
  console.log(getRandomColor());
});

To add more random values and create up to 256 unique colors in the `predefinedList`, you can follow this approach:

var start = Date.now();

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function getIndex(val, index) {
  return index;
}

var r = fillArray(256, getIndex);
var g = fillArray(256, getIndex);
var b = fillArray(256, getIndex);

var predefinedList = fillArray(256, function() {
  return [r, g, b].map(function(color) {
    return color.splice(Math.floor(Math.random() * color.length), 1)[0];
  }).join(",");
});

console.log("Milliseconds elapsed: " + (Date.now() - start));

console.log(predefinedList);

You can combine both methods to get an array of randomized RGB colors:

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function getIndex(val, index) {
  return index;
}

var r = fillArray(256, getIndex);
var g = fillArray(256, getIndex);
var b = fillArray(256, getIndex);

var predefinedList = fillArray(256, function() {
  return `rgb(${[r, g, b].map(function(color) {
    return color.splice(Math.floor(Math.random() * color.length), 1)[0];
  }).join(",")})`;
});


function getRandomColor() {
  return predefinedList.splice(Math.floor(Math.random() * predefinedList.length), 1)[0];
}

var container = document.querySelector("#container");
var color = getRandomColor();

while (color){
  var newDiv = document.createElement("div");
  newDiv.setAttribute("style", `background-color: ${color};`);
  container.appendChild(newDiv);
  color = getRandomColor();
}

In addition, you can create arrays for `r`, `g`, and `b` with custom indexing functions like this:

function fillArray(size, callBack) {
  return Array.apply(null, Array(size)).map(callBack);
}

function createIndexFunction(start, multiplier) {
  return function(val, index) {
    return start + index * multiplier;
  }
}

var r = fillArray(26, createIndexFunction(0, 10));
var g = fillArray(26, createIndexFunction(200, 1));
var b = fillArray(26, createIndexFunction(50, 5));

console.log(r);
console.log(g);
console.log(b);

Generate a random color using Javascript on every page load

Answer №1

Similar questions

When utilizing MUI's ThemeProvider, it may result in encountering errors that display as "undefined"

Is there a way to obtain the "rotated" coordinates of a mouse click within a canvas element?

Do not apply tailwindcss styles to Material-UI

Refresh the information displayed in the open Google Maps Infowindow

Checking for null properties in Typescript objectsorHow to verify if a

What is the most effective method for incorporating web APIs (such as setTimeout, fetch, etc.) within the V8 engine?

How can I load only specific images on a webpage using HTML?

Providing properties to the main Vue.js components

To link the information within the angularJS controller

Tips for ensuring all my onclick event are clickable in iOS browser

What is the best way to extract the data from an object received in an AJAX GET request?

Establishing a TCP connection to a server using Javascript

How can I retrieve a list of downloads utilizing the Chrome.downloads api?

"Twice the loading of Meteor templates: once with an undefined collection, and once with it

Load the content of the dialog and transfer variables

Use an external javascript file in AngularJS if permitted

The inconsistency in hydration of children in <div> is due to the server-rendered element having a different number of child nodes than the client-side Virtual

Wordpress API returned an error with the code "rest_invalid_json" and the message "Invalid JSON data provided."

Experiencing issues launching the server.js file on Node.js while incorporating socket.io

Customers will refresh themselves whenever the supplier refreshes