js-color-gradient
Version:
This project hepls to get color gradient code based on value.
362 lines (359 loc) • 9.27 kB
HTML
<script>
var customColorMatrixOptionsAllGradient = [
{
style: 'gradient',
range: '0-20',
fromColor: '#8B0000',
toColor: '#FFCCCB'
},
{
style: 'gradient',
range: '21-40',
fromColor: '#8B8000',
toColor: '#FFFFE0'
},
{
style: 'gradient',
range: '41-60',
fromColor: '#0000ff',
toColor: '#ADD8E6'
}
];
var customColorMatrixOptionsOneConstant = [
{
style: 'gradient',
range: '0-20',
fromColor: '#8B0000',
toColor: '#FFCCCB'
},
{
style: 'constant',
range: '21-40',
color: '#FFFF00'
},
{
style: 'gradient',
range: '41-60',
fromColor: '#0000ff',
toColor: '#ADD8E6'
}
];
var tableData = [
{
item: 'item1',
count: 1,
percentage: 1
},
{
item: 'item2',
count: 2,
percentage: 2
},
{
item: 'item3',
count: 3,
percentage: 3
},
{
item: 'item4',
count: 4,
percentage: 4
},
{
item: 'item5',
count: 5,
percentage: 5
},
{
item: 'item6',
count: 6,
percentage: 6
},
{
item: 'item7',
count: 7,
percentage: 7
},
{
item: 'item8',
count: 8,
percentage: 8
},
{
item: 'item9',
count: 9,
percentage: 9
},
{
item: 'item10',
count: 10,
percentage: 10
},
{
item: 'item11',
count: 11,
percentage: 11
},
{
item: 'item12',
count: 12,
percentage: 12
},
{
item: 'item13',
count: 13,
percentage: 13
},
{
item: 'item14',
count: 14,
percentage: 14
},
{
item: 'item15',
count: 15,
percentage: 15
},
{
item: 'item16',
count: 16,
percentage: 16
},
{
item: 'item17',
count: 17,
percentage: 17
},
{
item: 'item18',
count: 18,
percentage: 18
},
{
item: 'item19',
count: 19,
percentage: 19
},
{
item: 'item20',
count: 20,
percentage: 20
},
{
item: 'item21',
count: 21,
percentage: 21
},
{
item: 'item22',
count: 22,
percentage: 22
},
{
item: 'item23',
count: 23,
percentage: 23
},
{
item: 'item24',
count: 24,
percentage: 24
},
{
item: 'item25',
count: 25,
percentage: 25
},
{
item: 'item26',
count: 26,
percentage: 26
},
{
item: 'item27',
count: 27,
percentage: 27
},
{
item: 'item28',
count: 28,
percentage: 28
},
{
item: 'item29',
count: 29,
percentage: 29
},
{
item: 'item30',
count: 30,
percentage: 30
},
{
item: 'item31',
count: 31,
percentage: 31
},
{
item: 'item32',
count: 32,
percentage: 32
},
{
item: 'item33',
count: 33,
percentage: 33
},
{
item: 'item34',
count: 34,
percentage: 34
},
{
item: 'item35',
count: 35,
percentage: 35
},
{
item: 'item36',
count: 36,
percentage: 36
},
{
item: 'item37',
count: 37,
percentage: 37
},
{
item: 'item37',
count: 37,
percentage: 37
},
{
item: 'item38',
count: 38,
percentage: 38
},
{
item: 'item39',
count: 39,
percentage: 39
},
{
item: 'item40',
count: 40,
percentage: 40
},
{
item: 'item41',
count: 41,
percentage: 41
},
]
function getGradientColorArray(startColor, endColor, steps) {
var startRGB = hexToRgb(startColor);
var endRGB = hexToRgb(endColor);
var rStep = (endRGB.r - startRGB.r) / (steps - 1);
var gStep = (endRGB.g - startRGB.g) / (steps - 1);
var bStep = (endRGB.b - startRGB.b) / (steps - 1);
var gradientColors = [];
for (var i = 0; i < steps; i++) {
var r = Math.round(startRGB.r + (rStep * i));
var g = Math.round(startRGB.g + (gStep * i));
var b = Math.round(startRGB.b + (bStep * i));
var color = rgbToHex(r, g, b);
gradientColors.push(color);
}
return gradientColors;
};
function hexToRgb(hex) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
return { r: r, g: g, b: b };
}
function rgbToHex(r, g, b) {
var rHex = r.toString(16).padStart(2, '0');
var gHex = g.toString(16).padStart(2, '0');
var bHex = b.toString(16).padStart(2, '0');
return '#' + rHex + gHex + bHex;
};
function getGradientColor(fromColor, toColor, gradientSteps) {
let startColor = fromColor, endColor = toColor, steps = gradientSteps
var gradientColors = getGradientColorArray(startColor, endColor, steps);
return gradientColors;
}
function getCustomGradientColorArray(options) {
let configArray = options;
let startColor, endColor, range, steps;
let colorMatrix = [];
let currentColorMatrix = [];
for (let i = 0; i < configArray.length; i++) {
currentColorMatrix = [];
if (configArray[i].style === 'gradient') {
startColor = configArray[i].fromColor;
endColor = configArray[i].toColor;
} else {
startColor = configArray[i].color;
endColor = configArray[i].color;
}
range = (configArray[i].range).split("-");
steps = (parseInt(range[1]) - parseInt(range[0])) + 1;
currentColorMatrix = getGradientColor(startColor, endColor, steps);
colorMatrix = colorMatrix.concat(currentColorMatrix);
}
return colorMatrix;
}
</script>
<html>
<head>
<body>
<div>
<h4>Gradient with three colors and all gradient</h4>
<table>
<thead>
<tr>
<td><h4>Item</h4></td>
<td><h4>Count</h4></td>
<td><h4>Percentage</h4></td>
</tr>
</thead>
<tbody>
<script>
document.write(" <table border=2px solid black>");
let currentTd;
for (rows = 1; rows <= 60; rows++) {
document.write(" <tr> ")
currentTd = "<td style= padding:10px;background-color:"+getCustomGradientColorArray(customColorMatrixOptionsAllGradient)[rows]+" > Row number is " + rows + " <br> Column number is " + 1 + " </td> ";
document.write(currentTd);
document.write(" </tr> ")
}
document.write(" </table> ")
</script>
</tbody>
</table>
<h4>Gradient with 3 colors in which 2 gradient(red and blue) and 1 constant(yellow- no gradient)</h4>
<table>
<thead>
<tr>
<td><h4>Item</h4></td>
<td><h4>Count</h4></td>
<td><h4>Percentage</h4></td>
</tr>
</thead>
<tbody>
<script>
document.write(" <table border=2px solid black>");
for (rows = 1; rows <= 60; rows++) {
document.write(" <tr> ")
document.write("<td style= padding:10px;background-color:"+getCustomGradientColorArray(customColorMatrixOptionsOneConstant)[rows]+" > Row number is " + rows + " <br> Column number is " + 1 + " </td> ");
document.write(" </tr> ")
}
document.write(" </table> ")
</script>
</tbody>
</table>
</div>
</body>
</head>
</html>