How to create a colored bar according to an array of elements HTML/Javascript

JavaScript
1

Hi, what I’m trying to do is that in javascript I have an array of numbers and in html I want to take that array and draw a colored bar according to each element on it.

For example, if I have an array with this [1,2,3,4,5,6,7,8,9] what I want to see is something like this.

2

Or if the array is equal to [1,6,3,4,2,1,2,2] the bar would be something like this

3

That looks a lot like a JavaScript homework assignment :slight_smile:

What have you written so far?

You can post a “working page” - one that starts with <!doctype html>, contains the <head> information, continues with the <body> and HTML, then ends with </html>. JavaScript should be included between <script> tags just before the </body> tag.

You could post a jsfiddle or CodePen, too.

4

Thanks for your answer,
I already did it :smiley:, and no, it’s not homework, I did it with angularjs but I wanted to see if there was a way for doing it in javascript only, I’ll show you how I did it.

First I created a controller named Ctrl2. In this controller there are:
-An array of objects named statuses with the parameters value and text.
-A function named set_color that verifies the value, and according to it, gives a background color for the status.

$scope.statuses = [
  {value: 1, text: 'status1'},
  {value: 2, text: 'status2'},
  {value: 3, text: 'status3'},
  {value: 4, text: 'status4'},
  {value: 5, text: 'status5'},
  {value: 6, text: 'status6'},
  {value: 7, text: 'status7'},
  {value: 8, text: 'status8'},
  {value: 9, text: 'status9'}
]; 
 $scope.set_color = function (status) {
    if (status.value== 1) {
        return { background: "yellow" }
    }
    else if (status.value == 2) {
        return {background:"red"}
    }
    else if (status.value == 3) {
        return { background: "blue" }
    }
    else if (status.value == 4) {
        return { background: "gray" }
    }
    else if (status.value == 5) {
        return { background: "green" }
    }
    else if (status.value == 6) {
        return { background: "brown" }
    }
    else if (status.value == 7) {
        return { background: "black" }
    }
    else if (status.value == 8) {
        return { background: "orange" }
    }
    else if (status.value == 9) {
        return { background: "purple" }
    }
}

In the HTML code I call an ng-repeat with for each element of the array it calls the set_color function sending the value of the status by using an ng-style

<div ng-controller="Ctrl2">
    <table style="border-collapse:collapse;">
        <tr ng-repeat="status in statuses">
            <td>{{status.value}}</td>
            <td style="width:125px; height:50px;" ng-style="set_color(status)"></td>
        </tr>
    </table>
</div>

The result that I get is this

392×777 10.3 KB

2 Likes
5

Great! Thanks very much for posting your solution. If you don’t mind, I will move this back into the JS category where angularJS is part of their focus. Someone there might be interested in your code.

Thank you again :slight_smile:

1 Like
6

Hi there JuanP.Yep,

here is a basic random color example…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
#colors li{
    width: 6em;
    height: 2em;
    margin-bottom:0.2em;
    border: 0.1em solid #000;
 }
#change {
    cursor: pointer;
 }
.color0{background:#ff0;}
.color1{background:#f00;}
.color2{background:#5b9cd6;}
.color3{background:#dcdcdc;}
.color4{background:#71af45;}
.color5{background:#c09000;}
.color6{background:#050505;}
.color7{background:#ffc100;}
.color8{background:#712ca1;}
</style>

</head>
<body> 
<ol id="colors">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ol>

<button id="change">change colours</button>

<script>
(function() {
   'use strict';
   var c;
   var l=document.getElementById('colors').getElementsByTagName('li');
   document.getElementById('change').addEventListener('click', function() {
for(c=0;c<l.length;c++) {
   l[c].className='color'+Math.floor(Math.random()*l.length);
  }
 },false);
}());
</script>
</body>
</html>

coothead

7

Hi there JuanP.Yep,

if you just want to randomise the positions, then try it like this…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
#colors li{
    width: 6em;
    height: 2em;
    margin-bottom:0.2em;
    border: 0.1em solid #000;
 }
#change {
    cursor: pointer;
 }
.color1{background:#ff0;}
.color2{background:#f00;}
.color3{background:#5b9cd6;}
.color4{background:#dcdcdc;}
.color5{background:#71af45;}
.color6{background:#c09000;}
.color7{background:#050505;}
.color8{background:#ffc100;}
.color9{background:#712ca1;}
</style>
</head>
<body> 
<ol id="colors">
 <li class="color1"></li>
 <li class="color2"></li>
 <li class="color3"></li>
 <li class="color4"></li>
 <li class="color5"></li>
 <li class="color6"></li>
 <li class="color7"></li>
 <li class="color8"></li>
 <li class="color9"></li>
</ol>
<button id="change">change colours</button>
<script>
(function() {
   'use strict';
   var c;
   var k;
   var a;
   var r;
   var i;
   var l=document.getElementById('colors').getElementsByTagName('li');
   document.getElementById('change').addEventListener('click', function() {
   a=[];
   r=[];
   rdm();
for(c=0;c<l.length;c++) {
   l[c].className='color'+r[c];
  }
 },false);
function rdm() {
for(k=0;k<l.length;k++) { 
   a[k]=k+1;
 } 
while(a.length>0) {
   i=Math.floor(Math.random()*a.length);
   r.push(a[i]);
   a.splice(i,1);
 }
   return r;
 }
}());
</script>
</body>
</html>

coothead

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.