I have two types of arrays:

colorList Contains a predefined set of colours:

var colorList = [
  '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
  '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
];

And dataFromSql contains certain with classes, which corresponds to index of colorList :

 var dataFromSql = ['A','A','B','C','C','C','D'];

finalColor will be a list of array from colorList. Their secquence will be as defined in dataFromSql

Output:

var finalColor = ['#ff7f50','#ff7f50','#87cefa','#da70d6','#da70d6','#da70d6','#32cd32'];

I have two types of arrays:

colorList Contains a predefined set of colours:

var colorList = [
  '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
  '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
];

And dataFromSql contains certain with classes, which corresponds to index of colorList :

 var dataFromSql = ['A','A','B','C','C','C','D'];

finalColor will be a list of array from colorList. Their secquence will be as defined in dataFromSql

Output:

var finalColor = ['#ff7f50','#ff7f50','#87cefa','#da70d6','#da70d6','#da70d6','#32cd32'];

• javascript

Share Improve this question Follow edited Mar 18, 2016 at 14:38 JayKandari 1,25844 gold badges1717 silver badges3333 bronze badges asked Mar 18, 2016 at 13:32 user2633804user2633804 25711 gold badge44 silver badges1515 bronze badges 5

• 1 im not sure how the 2 arrays relate. – Daniel A. White Commented Mar 18, 2016 at 13:34
• 1 looks like dataFromSql values are character based indexes of the values in colorList – Ben Sewards Commented Mar 18, 2016 at 13:34
• Have you tried coding anything at all? You need to iterate over dataFromSql, check if the value is a new one. If so, take one colour from the colour array and asign it (e.g. using a string-indexed array) to that value. It not, just take the colour in your string-indexed array. – Aurel Bílý Commented Mar 18, 2016 at 13:35
• @BenSewards Maybe they meant A, B, … to be generic examples, i.e. B is any string different from string A. – Aurel Bílý Commented Mar 18, 2016 at 13:37
• 1 Yes, it is just a dummy example. A,B,C,D,... are different strings. I would like to attach to each string a different color to use in a bar chart. – user2633804 Commented Mar 18, 2016 at 13:38

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

var colorList = [
  '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
  '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
];
var dataFromSql = ['A','A','B','C','C','C','D'];
var colors = {};
var finalColor = [];
dataFromSql.forEach(function(value){
    if (!colors[value]) {
        colors[value] = colorList.shift();
    }
    finalColor.push(colors[value]);
});
console.log(finalColor);

Edit: if you'll have more unique values in dataFromSql than colors in colorList I would remend you to use following code snippet:

var colorList = [
  '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
  '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
];
var dataFromSql = ['A','A','B','C','C','C','D', 'E', 'F', 'G', 'H', 'I', 'J', 'K' ,'L'];
var colors = {};
var finalColor = [];
var uniqueCount = 0;
dataFromSql.forEach(function(value){
    if (!colors[value]) {
        colors[value] = ++uniqueCount;
    }
    finalColor.push(colorList[colors[value] % colorList.length]);
});
console.log(finalColor);

var colorList = [
    '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
    '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
];
var dataFromSql = ['A','A','B','C','C','C','D'];
var finalColor = [];
var assignedColors = [];
for (var i = 0, l = dataFromSql.length; i < l; ++i){
    if (!assignedColors[dataFromSql[i]]){
        assignedColors[dataFromSql[i]] = colorList.splice(0, 1)[0];
    }
    finalColor.push(assignedColors[dataFromSql[i]]);
}

Just the general idea, add lots of error checks, if needed.

If you want to associate a color to each class, you can do something like this:

var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
var dataFromSql = ['A', 'A', 'B', 'C', 'C', 'C', 'D'];

var classCollors = {};
var index = 0;
var currentClass = 'A';
dataFromSql.forEach(function(i) {
  if (i == currentClass) {
    classCollors[i] = colorList[index];
  } else {
    index++;
    currentClass = i;
    classCollors[i] = colorList[index];
  }

});

console.log(classCollors); 

You can use a temporary object for the colors.

{
    "A": "#ff7f50",
    "B": "#87cefa",
    "C": "#da70d6",
    "D": "#32cd32",
    "E": "#6495ed",
    "F": "#ff69b4",
    "G": "#ba55d3",
    "H": "#cd5c5c",
    "I": "#ffa500",
    "J": "#40e0d0"
}

var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'],
    dataFromSql = ['A', 'A', 'B', 'C', 'C', 'C', 'D'],
    colorObject = {},
    finalColor;

colorList.forEach(function (a, i) {
    colorObject[(i + 10).toString(36).toUpperCase()] = a;
});

finalColor = dataFromSql.map(function (a) {
    return colorObject[a];
});

document.write('<pre>' + JSON.stringify(finalColor, 0, 4) + '</pre>');

Hope this helps!

var colorList = [
  '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
  '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
];

var dataFromSql = ['A','A','B','C','C','C','D'];

var finalColor = [];

var tempArray = [];

dataFromSql.forEach(function(i) {
     console.log(i);
     if (tempArray.indexOf(i) === -1) {
       tempArray.push(i);
     }
     finalColor.push(colorList[tempArray.indexOf(i)]);
});


console.log(finalColor);

Simple Understandable & Clear Answer.

var colorList = [
  '#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
  '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0'
];

function getColors(items){
    var colors = [];
    items.forEach(function(c) {
        c = c.toUpperCase();
        var index = c.charCodeAt() - 65; // 65 for 'A';
        colors.push(colorList[index]);
    });

    return colors
}

var dataFromSql = ['A','A','B','C','C','C','D'];


var finalData = getColors(dataFromSql);
// Outputs : ["#ff7f50", "#ff7f50", "#87cefa", "#da70d6", "#da70d6", "#da70d6", "#32cd32"]