Semantic representation of a chart

Question

I'm recoding an old site that contains a chart similar to this:

alt text http://dl.getdropbox.com/u/240752/rental-chart.gif

How would this chart be represented with pure HTML? I'm loathed to just include it as an image.

I'm thinking a table, just replaced with an image, or perhaps overlaid with absolutely positioned table rows, but I think that may be a bit fragile.

Any suggestions welcomed.

Answer 1

Whats wrong with the image?

Most times when you see chart information on the Web its a generated .jpg or .png.

Have all those designers got something wrong?

Any attempt to draw the chart using tables and backgroud colours will not be intelligable to a sight impaired person, and, in all probability will not render correctly on a browser that cannot handle images.

Use the image and have an "alt" text with a real English description "A chart showing ACME product costs only $49 compared with competitors: Rental Company 4 at $51 .......

Answer 2

<div class="chart">
 <h3>Price for two weeks</h3>
 <div class="companies">
  <div class="company_scale"></div>
  <div class="company1">
   <span class="name">Company 1</span><span class="cost"> $78</span>
  </div>
  <div class="company2">
   <span class="name">Company 2</span><span class="cost"> $74</span>
  </div>
  <div class="company3">
    <span class="name">Company 3</span><span class="cost"> $60</span>
  </div>
  <div class="company4">
    <span class="name">Company 4</span><span class="cost"> $55</span>
  </div>
  <div class="acme">
    <span class="name">Acme Product</span><span class="cost"> $49.95</span>
  </div>
 </div>
</div>

Or something similar. You would specify the widths with CSS, and hide the "cost" classed spans with css.

I was tempted to use a definition list, but that would have been harder to get the hierarchical associations in the CSS.

the Benefit of this markup is when rendered without any style data, is it retains most of its original meaning:

---

Price for two weeks
 Company 1 $78
 Company 2 $74
 Company 3 $60
 Company 4 $55
 Acme Product $49.95

---

Table Model:

I figured I would at least try Liams suggestion using tables, it works quite well actually, just to add the background gradients in and we're set.

Scroll to the bottom to see it in action ( will expire rather quick ) http://www.webdevout.net/test?03

Original Content Follows

<div class="chart">
 <h3>Price for two weeks</h3>
 <table class="companies">
  <thead>
  <tr class="titles">
    <td>Company</td><td>Price</td>
  </tr>
  </thead>
  <tbody>
    <tr class="company1">
      <td class="name">Company 1</td>
      <td class="cost">$78</td>
    </tr>
    <tr class="company2">
      <td class="name">Company 2</td>
      <td class="cost">$74</td>
    </tr>
    <tr class="company3">
      <td class="name">Company 3</td>
      <td class="cost">$60</td>
    </tr>
    <tr class="company4">
      <td class="name">Company 4</td>
      <td class="cost">$55</td>
    </tr>
   <tr class="acme">
      <td class="name">Acme Product</td>
      <td class="cost">$49.95</td>
    </tr>
  </tbody>
  </table>
</div>

---

div.chart 
{ 
  border: 1px solid #DDD;
}
div.chart table, 
div.chart tbody, 
div.chart thead,
div.chart tr 
{ 
  display: block; 
}
div.chart td 
{ 
  display: inline-block;
  overflow-x: hidden;
}
div.chart {
  padding: 10px;
}
div.chart td.cost, div.chart thead td { 
  display: none;
}

div.chart tbody tr td { 
  background-color: #999;
  padding: 4px;
  margin-top: 16px;
  text-align: right;
}

div.chart  tr.company1 td { 
  width:260px;
}
div.chart tr.company2 td { 
  width:246px;
}
div.chart tr.company3 td { 
  width:200px;
}
div.chart tr.company4 td { 
  width:183px;
}

div.chart tbody tr td.cost { 
  display: inline-block;
  background-color: inherit;
  color: #F00;
  font-size: 80%;
  width: 80px;
}
div.chart  tr.acme td { 
  background-color: #99F;
  width: 166px;
}
div.chart tbody  tr.acme td.cost {
  color: #000;
  background-color: #FF9;
}

Answer 3

Well, a chart is a graphical element, I assume you want the data to be accessible to both text-only browsers and search engines (?): in this case using a <table> for the data presented in a graph is actually correct. I know a lot of people is scared of tables, because all the talk about "table-less" design. But using tables for tabular data is what the tables was intended for.

I would have put a table below (or above, besides etc.) the chart image, with the data the table displays. A chart is good for visualizing differences, and not so good for seeing the actual values; therefore a table as well is a nice supplement to the graphics.

If the chart is not very complex (as this sample) you could also just add an alt-text with a plain english description of the chart, something like this:

<img alt="The price for two weeks is 80 dollars at rental company 1, 
73 dollars at ... The best service and price of 48 dollars 
you get at acme product, plus you can keep it for life" />

A text reader should have no problems reading this in a meaningful way.

Answer 4

I seem to remember some useful posts on this subject. You might find that in the end a simple image is best from a cost-benefit point of view, but this article will tell you all you could ever want to know about using html and css to draw bar graphs.

By coincidence, after posting this I looked at everyblock.com yesterday and noticed they have a particularly good implementation of graphs in html/css which would be worth looking at.

Answer 5

You could also consider having just a table in your HTML & then using Javascript to generate the table: http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google-charts-api/

But for a chart like the image you supplied - where it's just a marketing image and the values have no real meaning - then just a good alt text description should be fine.

Answer 6

See the great article on CSS for Bar Graphs on the Apples to Oranges site.

(Edit: it's the same link posted by @Sam Murray-Sutton above - sorry)