Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
</body>
</html>
 
var data = [];
​
data[0] = [{
    "value": 29,
    "series": 1,
    "category": "Men",
    "fname": "NY",
     "valueColor": "red"
}, {
    "value": 44,
    "series": 2,
    "category": "Men",
    "fname": "GY",
    "valueColor": "blue"
}, {
    "value": 10,
    "series": 3,
    "category": "Men",
    "fname": "HY",
     "valueColor": "orange"
},{
    "value": 0,
    "series": 4,
    "category": "Men",
    "fname": "",
     "valueColor": ""
}, {
    "value": 0,
    "series": 5,
    "category": "Men",
    "fname": "",
    "valueColor": ""
}, {
    "value": 0,
    "series": 6,
    "category": "Men",
    "fname": "",
     "valueColor": ""
}];
​
data[1] = [
    {
    "value": 0,
    "series": 1,
    "category": "Women",
    "fname": "",
     "valueColor": ""
}, {
    "value": 0,
    "series": 2,
    "category": "Women",
    "fname": "",
    "valueColor": ""
}, {
    "value": 0,
    "series": 3,
    "category": "Women",
    "fname": "",
     "valueColor": ""
},{
    "value": 16,
    "series": 4,
    "category": "Women",
    "fname": "RY",
    "valueColor": "yellow"
}, {
    "value": 23,
    "series": 5,
    "category": "Women",
    "fname": "TY",
    "valueColor": "green"
​
}, {
    "value": 23,
    "series": 6,
    "category": "Women",
    "fname": "NY",
    "valueColor": "red"
​
}];
​
​
data[2] = [
    {
    "value": 0,
    "series": 1,
    "category": "LG",
    "fname": "",
     "valueColor": ""
}, {
    "value": 0,
    "series": 2,
    "category": "LG",
    "fname": "",
    "valueColor": ""
}, {
    "value": 0,
    "series": 3,
    "category": "LG",
    "fname": "",
     "valueColor": ""
},{
    "value": 16,
    "series": 4,
    "category": "LG",
    "fname": "RY",
    "valueColor": "yellow"
}, {
    "value": 23,
    "series": 5,
    "category": "LG",
    "fname": "TY",
    "valueColor": "green"
​
}, {
    "value": 23,
    "series": 6,
    "category": "LG",
    "fname": "NY",
    "valueColor": "red"
​
}];
​
var data2 = [];
​
data2[0] = [{
    "value": 14,
    "series": 1,
    "category": "Men",
    "fname": "NY",
     "valueColor": "red"
}, {
    "value": 33,
    "series": 2,
    "category": "Men",
    "fname": "CY",
    "valueColor": "blue"
}, {
    "value": 16,
    "series": 3,
    "category": "Men",
    "fname": "KY",
     "valueColor": "orange"
},{
    "value": 0,
    "series": 4,
    "category": "Men",
    "fname": "",
     "valueColor": ""
}, {
    "value": 0,
    "series": 5,
    "category": "Men",
    "fname": "",
    "valueColor": ""
}, {
    "value": 0,
    "series": 6,
    "category": "Men",
    "fname": "",
     "valueColor": ""
}];
​
data2[1] = [
    {
    "value": 0,
    "series": 1,
    "category": "Women",
    "fname": "",
     "valueColor": ""
}, {
    "value": 0,
    "series": 2,
    "category": "Women",
    "fname": "",
    "valueColor": ""
}, {
    "value": 0,
    "series": 3,
    "category": "Women",
    "fname": "",
     "valueColor": ""
},{
    "value": 22,
    "series": 4,
    "category": "Women",
    "fname": "RY",
    "valueColor": "yellow"
}, {
    "value": 21,
    "series": 5,
    "category": "Women",
    "fname": "TY",
    "valueColor": "green"
​
}, {
    "value": 13,
    "series": 6,
    "category": "Women",
    "fname": "SY",
    "valueColor": "red"
​
}];
​
​
data2[2] = [
    {
    "value": 0,
    "series": 1,
    "category": "LG",
    "fname": "",
     "valueColor": ""
}, {
    "value": 0,
    "series": 2,
    "category": "LG",
    "fname": "",
    "valueColor": ""
}, {
    "value": 0,
    "series": 3,
    "category": "LG",
    "fname": "",
     "valueColor": ""
},{
    "value": 26,
    "series": 4,
    "category": "LG",
    "fname": "RY",
    "valueColor": "yellow"
}, {
    "value": 8,
    "series": 5,
    "category": "LG",
    "fname": "TY",
    "valueColor": "green"
​
}, {
    "value": 33,
    "series": 6,
    "category": "LG",
    "fname": "NY",
    "valueColor": "red"
​
}];
​
function colorSpectrumm(N) {
    var colorMap = [];
    for (i = 1; i < N; i++) {
        var r = getRndColor();
        var g = getRndColor();
        var b = getRndColor();
        colorMap.push("#" + r + g + b);
    }
    return colorMap;
}
​
function getRndColor() {
    var n = Math.floor(Math.random() * 255);
    var hex = Number(n).toString(16);
    if (hex.length < 2) {
        hex = "0" + hex;
    }
    return hex;
}
​
//match same formation name and assign same color
function process() {
    var map = {};
    colorMap = colorSpectrumm(data.length);
    data.forEach(function (item, index) {
        if (!map.hasOwnProperty(item.fname) && item.valueColor !== "") {
            map[item.fname] = colorMap[index];
        }
        data[index].valueColor = map[item.fname];
    });
  return data;
}
​
function dataReduce(d){
  return d.reduce(function (a, b) {
    return a.concat(b);
  });
}
​
// console.log(data);
data = dataReduce(data);
data = process(data);
​
data2 = dataReduce(data2);
​
function makeSameColorsFrom(data1){
  console.log()
  data2.forEach(function(item, index){
    data2[index].valueColor = findItemInObject(data1, item.fname);
  });
  return data2;
}
function findItemInObject(obj, item){
  var i = $.grep(obj, function(e){ return e.fname == item; });
  return i.length ? i[0].valueColor : undefined;
}         
​
var data2 = makeSameColorsFrom(data, data2, data3, data4);
console.log(data, data2);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dhirajbodicherlapro
0viewers