Disabling dynamic color updates upon refresh

Question

Disabling dynamic color updates upon refresh

I am currently using chartjs and I want to generate new random colors each time the page is refreshed. However, I need these colors to remain fixed and not change after a page refresh or reload. Below is the function I am working with:

getRandomRgb() {
    var num = Math.round(0xffffff * Math.random());
 
    var r = num >> 16;
    var g = (num >> 8) & 255;
    var b = num & 255;
    return "rgb(" + r + ", " + g + ", " + b + ")";
  }

This is where I implemented the function:

this.currentResponseItems.forEach((x) => {
            x.Items.forEach((z) => {
              if (!colorMap[z.Description]) {
                colorMap[z.Description] = this.getRandomColor();
              }
              console.log(z.Description, " : ", colorMap[z.Description]);
              z["phaseId"] = x.Id;
              let zData = [];

              let number = array.indexOf(z.phaseId);
              if (z.Number != 0) {
                zData[number] = z.Number;

                this.barChartData.push({
                  data: zData,
                  stack: x.Id,
                  label: z.Description,
                  fill: false,
                  grouped: true,
                  idStatoAffiliazione: x.Id,
                  channelID: z.Id,
                  backgroundColor: colorMap[z.Description],
                  hoverBackgroundColor: colorMap[z.Description],
                  pointBackgroundColor: colorMap[z.Description],
                  pointBorderColor:colorMap[z.Description],
                  pointHoverBackgroundColor:colorMap[z.Description],
                  pointHoverBorderColor: colorMap[z.Description],
                
                });

Below is the HTML code for the chartjs:

 <div class="container-chart cursor-pointer" fxLayout="row" *ngIf="barChartData.length > 0" fxLayoutGap="20px">
                <canvas baseChart fxFlex="100" [chartType]="'horizontalBar'" [datasets]="barChartData" [options]="barChartOptions" [labels]="barChartLabels" [colors]="graphColors" ></canvas>
                <!-- <graph-legend fxFlex="20" [configs]="graphLegendConfig"></graph-legend> -->
            </div>

javascript angular typescript chart.js

Answer 1

Answer №1

Assuming you have an array named colorMap containing all the colors, it is recommended to store this array in localStorage. However, before saving it, make sure to stringify it. Update your if statement as follows:

// Store in local storage after generating the array
localStorage.setItem("colorMap", JSON.stringify(colorMap));

Your conditional should appear like this:

// Check if colors are saved in localStorage
if(!localStorage.getItem("colorMap")){
  // Generate new random values
} else { 
  // Retrieve the stored array from local storage
  colorMap = JSON.parse(localStorage.getItem("colorMap"));
}

Answer 2

Assuming you have an array named colorMap containing all the colors, it is recommended to store this array in localStorage. However, before saving it, make sure to stringify it. Update your if statement as follows:

// Store in local storage after generating the array
localStorage.setItem("colorMap", JSON.stringify(colorMap));

Your conditional should appear like this:

// Check if colors are saved in localStorage
if(!localStorage.getItem("colorMap")){
  // Generate new random values
} else { 
  // Retrieve the stored array from local storage
  colorMap = JSON.parse(localStorage.getItem("colorMap"));
}

Answer 3

Answer №2

To maintain the color even after a page reload without utilizing a server, you will need to save it in the user's browser. One method is storing it using localStorage. Here is an example of how your function could be implemented:

function getStoredRgb(colorIdentifier) {
    if (localStorage.hasOwnProperty(`storedRgb-${colorIdentifier}`)) return localStorage.getItem(`storedRgb-${colorIdentifier}`)

    var num = Math.round(0xffffff * Math.random());
    var red = num >> 16;
    var green = (num >> 8) & 255;
    var blue = num & 255;
    var storedRgbValue = "rgb(" + red + ", " + green + ", " + blue + ")";

    localStorage.setItem(`storedRgb-${colorIdentifier}`, storedRgbValue)
    return storedRgbValue
}

In your scenario, to generate a color for a specific colorIdentifier, you can use:

getStoredRgb(colorDictionary[z.Name])

Alternatively, you could store the entire color dictionary in localStorage instead of individual colors.

Answer 4

To maintain the color even after a page reload without utilizing a server, you will need to save it in the user's browser. One method is storing it using localStorage. Here is an example of how your function could be implemented:

function getStoredRgb(colorIdentifier) {
    if (localStorage.hasOwnProperty(`storedRgb-${colorIdentifier}`)) return localStorage.getItem(`storedRgb-${colorIdentifier}`)

    var num = Math.round(0xffffff * Math.random());
    var red = num >> 16;
    var green = (num >> 8) & 255;
    var blue = num & 255;
    var storedRgbValue = "rgb(" + red + ", " + green + ", " + blue + ")";

    localStorage.setItem(`storedRgb-${colorIdentifier}`, storedRgbValue)
    return storedRgbValue
}

In your scenario, to generate a color for a specific colorIdentifier, you can use:

getStoredRgb(colorDictionary[z.Name])

Alternatively, you could store the entire color dictionary in localStorage instead of individual colors.

Disabling dynamic color updates upon refresh

Answer №1

Answer №2

Similar questions

Is there a way to stabilize a section or content that bounces as I scroll?

Enhance Compatibility: IE11 URL Polyfill

Understanding the relationship between csv and json array formats, along with the process of converting them into a json array using Node.js

Encountering an issue with a class component stating that "this.setState is not a function

Transfer information from a single form and distribute it across multiple forms with the help of jQuery or Javascript

Error loading GLTF file

Is it possible to rearrange the slide order in Swiper Grid View?

Issue with Material UI grid not rendering properly in TypeScript environment

What causes the "The requested URL could not be retrieved" error to appear when using an angular app?

Discover the best correlation among multiple arrays

Combining existing CSS classes with node labels in Cytoscape JS for Angular: A Guide

When utilizing the Angular library in an Ionic project, make sure to call the inject() function within an injection context

Issue with HTML5 Video Play on Hover Functionality Ceases to Work Upon Loading Dynamic Content

Enhance Your Text Areas with Vue.js Filtering

The performance of the Ajax Jquery remove function leaves something to be desired

Creating a worldwide directive using AngularJS

Quill editor streamlining excess whitespace

Combining React with a jQuery plugin

Spin the text inside an <li> element generated by JavaScript

Gatsby, in combination with TSC, does not properly transpile the rest operator