CODEWITHSUNDEEP
htmlcss
rwallace
rwallace

Reputation: 33395

Horizontal bars in plain HTML

I'm trying to create a horizontal bar chart in plain HTML. (For what I'm trying to do, the requirement is that everything fit in a single foo.html file; inline CSS is okay, but no JavaScript, no external PNG images.) The classic technique for this kind of thing seems to be setting the width and background color of table cells, so I got as far as this simple test case:

<!DOCTYPE html>
<html lang="en">
<body>
  <table>
    <tr>
      <td>First</td>
      <td>
        <div style='background-color:blue; width:500'>
          Blue
        </div>
      </td>
    </tr>
    <tr>
      <td>Second</td>
      <td>
        <div style='background-color:green; width:1000'>
          Green
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

This does not work; when I load it in the latest version of Chrome, the blue and green bars appear in their correct colors, but both at the same very short length, ignoring the specified width numbers.

However, if I delete the first line, the DOCTYPE tag, it works perfectly! The blue and green bars appear at their specified lengths.

But the HTML validator says DOCTYPE really should be present, and I'm afraid omitting it just drops the browser into some older mode that might be now deprecated and might stop being supported in the future.

What is the best way to get this to work?

Upvotes: 2

Views: 14917

Answers (5)

Prince Patel
Prince Patel

Reputation: 21

I've created a simple horizontal range bar graph using HTML, CSS, and JavaScript. The graph displays a score percentage along with an ideal range highlighted within it. You can adjust the percentage and the ideal range as needed.

Edit with codepen:- https://codepen.io/princepatel157/pen/JjVYKxW

.figure {
  width: 400px;
  height: 400px;
  position: relative;
}

.figure .y-axis-heading{
  position: absolute;
  transform: rotate(-90deg);
  font-size: 12px;
  top: 20%;
  left: -40px;
  font-weight: 600;
}

/* TABLE */
.barChart_h {
  table-layout: fixed;
  width: 100%;
  overflow-wrap: break-word;
  border-spacing: 0;
}

/* TH+TD */
.barChart_h tbody tr.firstRow th,
.barChart_h tbody tr.firstRow td {
  padding: 70px 0px 10px 0px;
}

.barChart_h tbody tr.lastRow th,
.barChart_h tbody tr.lastRow td {
  padding: 10px 0px 20px 0px;
}

/* TH */

/* TD */
.barChart_h tbody td {
  border-left: 2px solid rgba(91, 92, 92, 1);
  background-image: linear-gradient(to Right, rgba(212, 255, 239, 1) 33.3%, rgba(255, 199, 210, 1) 33.3%, rgba(255, 199, 210, 1) 100%);
}

/* BARS */
.barChart_h tbody td span {
  position: relative;
  display: block;
  height: 30px;
  background: #99ffff;
}

/* BAR-VALUES */
.barChart_h tbody td span b {
  position: absolute;
  left: 100%;
  top: 0;
  right: auto;
  bottom: 0;
  display: block;
  padding: 0 0 0 0.5rem;
  font-weight: normal;
}

.barChart_h tbody th.y-axis {
  position: relative;
  /* New */
  padding-bottom: 1.4rem;
  border-top: 2px solid rgba(91, 92, 92, 1);
}

/* Y-AXIS LABELS */
.barChart_h tbody ol.y-axis-labels {
  position: absolute;
  top: auto;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.barChart_h tbody tr .x-axis-heading {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
}

.barChart_h tbody ol.y-axis-labels li.zero {
  position: absolute;
  left: 0;
  right: auto;
  bottom: auto;
  top: 0;
}

.barChart_h tbody ol.y-axis-labels li.zero b {
  transform: translate(-50%, 0%);
}

.barChart_h tbody ol.y-axis-labels li {
  flex: 1 0 0;
  text-align: right;
}

.barChart_h tbody ol.y-axis-labels li b {
  display: inline-flex;
  transform: translate(50%, 0%);
  font-weight: normal;
}
<figure class="figure">
    <p class="y-axis-heading">Attempts</p>
    <table class="barChart_h">
      <tbody>
        <!-- Data Rows -->
        <tr class="firstRow">
          <td><span style="width: 10%; background-color: rgba(33, 100, 157, 1);"><b>10</b></span></td>
        </tr>
        <tr class="lastRow">
          <td><span style="width: 40%; background-color: rgba(73, 182, 255, 1);"><b>40</b></span></td>
        </tr>

        <!-- Y-axis -->
        <tr>
          <th class="y-axis">
            <ol class="y-axis-labels">
              <li class="zero"><b>0</b></li>
              <li><b>5</b></li>
              <li><b></b></li>
              <li><b>100</b></li>
            </ol>
          </th>
        </tr>
        <tr>
          <span class="x-axis-heading">
            Percentage(%)
          </p>
        </tr>
      </tbody>
    </table>
  </figure>

Upvotes: 1

Davislor
Davislor

Reputation: 15144

You can embed inline SVG code using the <svg> tag in HTML5, and even apply CSS properties to its elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <Title>Bar Chart Example</title>
  <style>
    .chart text {
      fill: white;
      font: 10px sans-serif;
      text-anchor: end;
    }
  </style>
</head>
<body>

  <svg class="chart" width="100%" height="120">
    <g transform="translate(0,0)">
      <rect width="40" height="19" fill="blue"></rect>
      <text x="37" y="9.5" dy=".35em">4</text>
    </g>
    <g transform="translate(0,20)">
      <rect width="80" height="19" fill="green"></rect>
      <text x="77" y="9.5" dy=".35em">8</text>
    </g>
    <g transform="translate(0,40)">
      <rect width="150" height="19" fill="orange"></rect>
      <text x="147" y="9.5" dy=".35em">15</text>
    </g>
    <g transform="translate(0,60)">
      <rect width="160" height="19" fill="magenta"></rect>
      <text x="157" y="9.5" dy=".35em">16</text>
    </g>
    <g transform="translate(0,80)">
      <rect width="230" height="19" fill="darkcyan"></rect>
      <text x="227" y="9.5" dy=".35em">23</text>
    </g>
    <g transform="translate(0,100)">
      <rect width="420" height="19"  fill="red"></rect>
      <text x="417" y="9.5" dy=".35em">42</text>
    </g>
  </svg>

</body>
</html>


    .chart text {
      fill: white;
      font: 10px sans-serif;
      text-anchor: end;
    }
  <svg class="chart" width="100%" height="120">
    <g transform="translate(0,0)">
      <rect width="40" height="19" fill="blue"></rect>
      <text x="37" y="9.5" dy=".35em">4</text>
    </g>
    <g transform="translate(0,20)">
      <rect width="80" height="19" fill="green"></rect>
      <text x="77" y="9.5" dy=".35em">8</text>
    </g>
    <g transform="translate(0,40)">
      <rect width="150" height="19" fill="orange"></rect>
      <text x="147" y="9.5" dy=".35em">15</text>
    </g>
    <g transform="translate(0,60)">
      <rect width="160" height="19" fill="magenta"></rect>
      <text x="157" y="9.5" dy=".35em">16</text>
    </g>
    <g transform="translate(0,80)">
      <rect width="230" height="19" fill="darkcyan"></rect>
      <text x="227" y="9.5" dy=".35em">23</text>
    </g>
    <g transform="translate(0,100)">
      <rect width="420" height="19"  fill="red"></rect>
      <text x="417" y="9.5" dy=".35em">42</text>
    </g>
  </svg>

The above is based on an example from here or here, and you can tweak it to your heart’s content. For example, specifying dark caption text to display on top of a light color, adding a border, changing the background color, or adding rules. I haven’t tested with every browser out there, but it passes the W3C validator.

You could also use this with SVGs generated by an image editor or spreadsheet, and with different kinds of graphs.

Upvotes: 3

Dilip Patra
Dilip Patra

Reputation: 104

**I think you do like this**

            <!DOCTYPE html>
            <html lang="en">
            <body>
              <table style="width:100%;">
                <tr>
                  <td style="width:70px;">First</td>
                  <td>
                    <div style="background-color:blue; width:60%;">
                      Blue
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>Second</td>
                  <td>
                    <div style="background-color:green; width:100%;">
                      Green
                    </div>
                  </td>
                </tr>
              </table>
            </body>
            </html>

Upvotes: 2

Sathees karan
Sathees karan

Reputation: 91

The style of div should be like this style='background-color:green; width:1000px' px is must

Upvotes: 2

Oliver H&#246;rold
Oliver H&#246;rold

Reputation: 337

Just add 'px' after the values.

<!DOCTYPE html>
<html lang="en">
<body>
  <table>
    <tr>
      <td>First</td>
      <td>
        <div style='background-color:blue; width:500px'>
          Blue
        </div>
      </td>
    </tr>
    <tr>
      <td>Second</td>
      <td>
        <div style='background-color:green; width:1000px'>
          Green
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

enter image description here

Upvotes: 5

Related Questions