Toggle for fours colours

[bobkuspe]

Dear all

Could someone please help me to find a way for using the above function for showing 4 bars in distinct colours?

Using simple code no chart.js or any other library

Thank you in advance

function barIt(tem) {
 tem.length=4;
  var tab = '<table><tr><td colspan="'+tem.length+'" align="center">Table</td></tr>';
  toggle=true;
  for(var k=0;k<tem.length;k++) {
    diff = largest-tem[k][0];
   
    tab += '<tr><td colspan="'+
    tem[k][0]+
    '" bgcolor="'+((toggle)?'lightblue':'yellow')+'">'+
    tem[k][0]+
    '</td><td colspan="'+    
    diff+
    '">'+tem[k][1]+'</td></tr>'
         
    toggle=!toggle;
  }
  tab+='</table>';
  document.getElementById('bar').innerHTML=tab;
}

</script>

 

[bobkuspe]

Solved!

 

[VBService]

Have you tried use css for this purpose?

<style>
  #bar tr {
    transition: all 150ms;
  }
  #bar tr:nth-child(odd) {
    background-color: yellow;
  }
  #bar tr:nth-child(even) {
    background-color: lightblue;
  }
  #bar tr:hover {
    background-color: grey;
    color: white;
  }
  #bar td {
    width: 20vw;
    padding: .25rem;
    text-align: center;
  }
</style>

<div id="bar"></div>

<script>
  function barIt(data) {
    let rows_html = '';

    for (const row of data) {
      rows_html += `
        <tr>
          <td>${row.name1}</td>
          <td>${row.name2}</td>
          <td>${row.name3}</td>
          <td>${row.name4}</td>     
        </tr>`;
    }

    document.querySelector('#bar').innerHTML = `
      <table>
        <caption>Table caption</caption>
        ${rows_html}
      </table>
    `;
  }
 
  const data = [
    { name1: 'Lorem 1_1', name2: 'Lorem 1_2', name3: 'Lorem 1_3', name4: 'Lorem 1_4' },
    { name1: 'Lorem 2_1', name2: 'Lorem 2_2', name3: 'Lorem 2_3', name4: 'Lorem 2_4' },
    { name1: 'Lorem 3_1', name2: 'Lorem 3_2', name3: 'Lorem 3_3', name4: 'Lorem 3_4' },
    { name1: 'Lorem 4_1', name2: 'Lorem 4_2', name3: 'Lorem 4_3', name4: 'Lorem 4_4' },
    { name1: 'Lorem 5_1', name2: 'Lorem 5_2', name3: 'Lorem 5_3', name4: 'Lorem 5_4' }
  ];
  barIt(data);
</script>

<style>
  #bar tr {
    transition: all 150ms;
  }
  #bar tr:nth-child(3n) {
    background-color: yellow;
  }
  #bar tr:nth-child(3n+1) {
    background-color: lightblue;
  }
  #bar tr:nth-child(3n+2) {
    background-color: lightgreen;
  }
  #bar tr:hover {
    background-color: grey;
    color: white;
  }
  #bar td:nth-child(1) {
    width: 5vw;
  }
  #bar td {
    width: 20vw;
    padding: .25rem;
    text-align: center;
  }
</style>

<div id="bar"></div>

<script>
  function barIt(data) {
    let rows_html = '';

    data.forEach((row, index) => {
      rows_html += `
        <tr>
          <td>${index + 1}</td>
          <td>${row.name1}</td>
          <td>${row.name2}</td>
          <td>${row.name3}</td>
          <td>${row.name4}</td>      
        </tr>`;
    });

    document.querySelector('#bar').innerHTML = `
      <table>
        <caption>Table caption</caption>
        ${rows_html}
      </table>
    `;
  }

  const data = [
    { name1: 'Lorem 1_1', name2: 'Lorem 1_2', name3: 'Lorem 1_3', name4: 'Lorem 1_4' },
    { name1: 'Lorem 2_1', name2: 'Lorem 2_2', name3: 'Lorem 2_3', name4: 'Lorem 2_4' },
    { name1: 'Lorem 3_1', name2: 'Lorem 3_2', name3: 'Lorem 3_3', name4: 'Lorem 3_4' },
    { name1: 'Lorem 4_1', name2: 'Lorem 4_2', name3: 'Lorem 4_3', name4: 'Lorem 4_4' },
    { name1: 'Lorem 5_1', name2: 'Lorem 5_2', name3: 'Lorem 5_3', name4: 'Lorem 5_4' },
    { name1: 'Lorem 6_1', name2: 'Lorem 6_2', name3: 'Lorem 6_3', name4: 'Lorem 6_4' },
    { name1: 'Lorem 7_1', name2: 'Lorem 7_2', name3: 'Lorem 7_3', name4: 'Lorem 7_4' },
    { name1: 'Lorem 8_1', name2: 'Lorem 8_2', name3: 'Lorem 8_3', name4: 'Lorem 8_4' },
    { name1: 'Lorem 9_1', name2: 'Lorem 9_2', name3: 'Lorem 9_3', name4: 'Lorem 9_4' },
    { name1: 'Lorem 10_1', name2: 'Lorem 10_2', name3: 'Lorem 10_3', name4: 'Lorem 10_4' }
  ];
  barIt(data);
</script>

<style>
  #bar tr {
    --main-font-size: .9rem;
    font: 600 var(--main-font-size)/1 system-ui, monospace, sans-serif;
    transition: all 150ms;
  }
  #bar td:nth-child(1) {
    background-color: yellow;
  }
  #bar td:nth-child(2) {
    background-color: lightblue;
  }
  #bar td:nth-child(3) {
    background-color: lightgreen;
  }
  #bar td:nth-child(4) {
    background-color: lightcoral;
  }
  #bar tr:hover {
    color: brown;
    /* font-size: calc(var(--main-font-size) + .05rem); */
    transform: scaleX(1.02);
  }
  #bar td {
    width: 20vw;
    padding: .25rem;
    text-align: center;
  }
</style>

<div id="bar"></div>

<script>
  function barIt(data) {
    let rows_html = '';

    for (const row of data) {
      rows_html += `
        <tr>
          <td>${row.name1}</td>
          <td>${row.name2}</td>
          <td>${row.name3}</td>
          <td>${row.name4}</td>         
       </tr>`;
    }

    document.querySelector('#bar').innerHTML = `
      <table>
        <caption>Table caption</caption>
        ${rows_html}
      </table>
    `;
  }

  const data = [
    { name1: 'Lorem 1_1', name2: 'Lorem 1_2', name3: 'Lorem 1_3', name4: 'Lorem 1_4' },
    { name1: 'Lorem 2_1', name2: 'Lorem 2_2', name3: 'Lorem 2_3', name4: 'Lorem 2_4' },
    { name1: 'Lorem 3_1', name2: 'Lorem 3_2', name3: 'Lorem 3_3', name4: 'Lorem 3_4' },
    { name1: 'Lorem 4_1', name2: 'Lorem 4_2', name3: 'Lorem 4_3', name4: 'Lorem 4_4' },
    { name1: 'Lorem 5_1', name2: 'Lorem 5_2', name3: 'Lorem 5_3', name4: 'Lorem 5_4' }
  ];
  barIt(data);
</script>

 

[bobkuspe]

Thank you VBService!

I did a simpliest change in the for loop. Nothing more

for(var k=2;k<4;k++) {
   
     diff = largest-tem[k][2];
   
    tab += '<tr><td colspan="'+
   tem[k][0]+
    '" bgcolor="'+((toggle)?'blue':'red')+'">'+
    tem[k][0]+
    '</td><td colspan="'+    
    diff+
   '">'+tem[k][1]+'</td></tr>'
   
    toggle=!toggle;
  }

And so on