I am creating a functionality to create the image like this Image link I mean that I want to display the color like
Currently, I think it is only possible with the if else condition.
I am doing this in the following way:
function getBackground($val) {
if($val<=0.3)
return "#0A3A0A";
if($val< 0.5)
return "#1E4E1E";
if($val< 1)
return "#508050";
if($val< 1.4)
return "#FFFF0A";
if($val< 1.8)
return "#FFFF1E";
if($val< 2)
return "#FFFF32";
if($val< 2.4)
return "#FFFF46";
return "red";
}
and in html in this way. It is in loop 1-15
$class=getBackground($val);
echo "<li style='background:{$class}'>{$val}%</li>";
but I don't think this is a good solution, because I have to create if else for every condition .
Is there a better way to do this? if yes, then please suggest it to me.
Update:
Main issue is:
The colors will behave like this if it is 0.2% the color will bright green and if it is o.6% it will light green and so on. If it is 0.9% it will lighter green .
I am looking for a solution to show different color like if value is 0.1 then dark green , if it is 0.1 less dark green ................. 0.9 the lighter green . similarly if val is 1.1 then dark yellow. if it is 1.2 less dark yellow........ 1.9 lighter yellow. something like this
This should work for you:
Just put your colors into an array with a certain range. Then loop through all colors and if the $val is in the range assign the color to $class and break the loop.
<?php
$arr = [
"green" => ["start" => 0, "end" => 1],
"yellow" => ["start" => 1, "end" => 3],
"orange" => ["start" => 3, "end" => 5],
"red" => ["start" => 5, "end" => 6],
];
$class = "default";
foreach($arr as $color => $range) {
if($val <= $range["end"] && $val >= $range["start"]) {
$class = $color;
break;
}
}
?>
EDIT:
As from your updated code, this should work for you:
<?php
$arr = [
["start" => 0, "end" => 0.3, "color" => "#0A3A0A"],
["start" => 0.3, "end" => 0.5, "color" => "#1E4E1E"],
["start" => 0.5, "end" => 1, "color" => "#508050"],
["start" => 1, "end" => 1.4, "color" => "#FFFF0A"],
["start" => 1.4, "end" => 1.8, "color" => "#FFFF1E"],
["start" => 1.8, "end" => 2, "color" => "#FFFF32"],
["start" => 2, "end" => 2.4, "color" => "#FFFF46"],
];
$class = "red";
foreach($arr as $range) {
if($val <= $range["end"] && $val >= $range["start"]) {
$class = $range["color"];
break;
}
}
?>
EDIT 2:
Since you don't want "static" values, this should work for you:
<?php
$arr = [
["start" => 0, "end" => 0.8, "colorStart" => "FFE6E6", "colorEnd" => "4C0000", "interval" => ""],
["start" => 0.8, "end" => 1.8, "colorStart" => "C2FFC2", "colorEnd" => "296629", "interval" => ""],
["start" => 1.8, "end" => 2.7, "colorStart" => "C2C2FF", "colorEnd" => "6666FF", "interval" => ""],
];
$arr = array_map(function($v){
$steps = intval((($v["end"] - $v["start"]) * 10));
list($redStart, $greenStart, $blueStart) = array_map("hexdec", str_split($v["colorStart"], 2));
list($redEnd, $greenEnd, $blueEnd) = array_map("hexdec", str_split($v["colorEnd"], 2));
$interval = sprintf("%02d", intval(($redStart - $redEnd) / $steps)) . sprintf("%02d", intval(($greenStart - $greenEnd) / $steps)) . sprintf("%02d", intval(($blueStart - $blueEnd) / $steps));
return array_merge($v, ["interval" => $interval]);
}, $arr);
$val = 1.1;
$class = "FF0000";
foreach($arr as $range) {
if($val < $range["end"] && $val >= $range["start"]) {
$class = "";
$multiplier = intval((($val - $range["start"]) * 10));
list($redAdd, $greenAdd, $blueAdd) = array_map(function($v)use($multiplier){return dechex($v*$multiplier);}, str_split($range["interval"], 2));
list($redStart, $greenStart, $blueStart) = str_split($range["colorStart"], 2);
list($redEnd, $greenEnd, $blueEnd) = str_split($range["colorEnd"], 2);
$colors = ["red", "green", "blue"];
foreach($colors as $color) {
if(hexdec(${$color . "End"}) > hexdec(${$color . "Start"}))
$r = hexdec(${$color . "Start"}) + hexdec(${$color. "Add"});
else
$r = hexdec(${$color . "Start"}) - hexdec(${$color. "Add"});
$class .= sprintf("%02X", ($r >= 0 && $r <= 255 ? $r : ($r<0?0:255)));
}
break;
}
}
echo "<div style='hight:100px;width:200px;background-color:#$class;'>some text</div>";
?>