Bar chart 2

by Peter Galiba

HTML

<div id="raphael-canvas">
    <table>
      <caption>13 articles in the last 30 days</caption>
      <thead>
        <th>Quality</th>
        <th>Productivity</th>
        <th>Tenure</th>
        <th>All-Time Articles Published</th>
      </thead>
      <tbody>
        <tr>
          <td>70</td>
          <td>80</td>
          <td>60</td>
          <td>90</td>
        </tr>
      </tbody>
    </table>
  </div>

JavaScript

/*global document, window, Raphael*/
(function (Raphael) {
  var canvas = document.getElementById('raphael-canvas'),
      table = canvas.getElementsByTagName('table')[0],
      thead = table.tHead.rows[0].cells,
      width = 700,
      paper = new Raphael(canvas, width, thead.length * 30),
      fontFamily = 'sans-serif',
      color = '#8DC641';

  function getText(el) {
    return el ? (el.textContent ? el.textContent : el.innerText) : '';
  }

  function parseTable(table, thead) {
    var caption = getText(table.caption).match(/^\s*(\d+)\s*(.*)/),
        tbody = table.tBodies[0].rows[0].cells,
        labels = paper.set(),
        i = 0,
        top,
        l = thead.length;

    table.style.display = 'none';

    for (; i < l; i += 1) {
      labels.push(paper.text(0, 6 + 30 * i, getText(thead[i])));
      top = 14 + 30 * i;
      paper.rect(0, top, width, 14).attr({
        fill: '#999',
        stroke: 'none'
      });
      paper.rect(0, top, width / 100 * getText(tbody[i]), 14).attr({
        fill: color,
        stroke: 'none'
      });
      paper.rect(width / 3 - 1, top, 1, 14).attr({
        fill: '#fff',
        stroke: 'none'
      });
      paper.rect(width * 2 / 3 - 1, top, 1, 14).attr({
        fill: '#fff',
        stroke: 'none'
      });
    }
    labels.attr({
      'font-family': fontFamily,
      'font-size': 10,
      'fill': '#426e9e',
      'text-anchor': 'start'
    });

  }

  parseTable(table, thead);
}(Raphael));