Chart

HTML

<div id="raphael-canvas">
    <table>
      <caption>2.1/8.0</caption>
      <thead>
        <th data-color="#B24040">Quality Threshold</th>
        <th data-color="#FA7A00">Top 10% of Examiners</th>
        <th data-color="#336699">Your Quality Score</th>
      </thead>
      <tbody>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>7</td>
        </tr>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>6</td>
        </tr>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>5</td>
        </tr>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>5</td>
        </tr>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>6</td>
        </tr>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>5</td>
        </tr>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>4</td>
        </tr>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>3</td>
        </tr>
        <tr>
          <td>3</td>
          <td>6</td>
          <td>2.5</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">*Based on your last 10 articles maximum.</td>
        </tr>
      </tfoot>
    </table>
  </div>

CSS

#raphael-canvas svg {
      border: 1px solid #000;
    }

JavaScript

/*global document, window, Raphael*/
(function (Raphael) {
  var canvas = document.getElementById('raphael-canvas'),
      table = canvas.getElementsByTagName('table')[0],
      paper = new Raphael(canvas, 360, 235),
      fontFamily = 'sans-serif';

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

  function drawChart(rows, colors, min, max) {
    var i = 0, j, k = rows.length, l = max - min, labels = paper.set(), step = 120 / l,
        top = 196, left = 40, width = 300, path, xstep = (width + left) / k;
    for (; i <= l; i += 1) {
      labels.push(paper.text(19, top - i * step, (min + i).toFixed(1)));
      paper.path('M' + left + ',' + (top - i * step) + ' l' + 300 + ',0').attr({
        stroke: '#f2f2f2'
      });
    }
    labels.attr({
      'font-family': fontFamily,
      'font-size': 10,
      'fill': '#999',
      'text-anchor': 'start'
    });

    for (i = 0, l = rows[0].cells.length; i < l; i += 1) {
      path = 'M' + left + ',';
      for (j = 0; j < k; j += 1) {
        path += j ?
          (40 + j * xstep) + ',' + (top - (getText(rows[j].cells[i]) - min) * step) + ' ' :
          (top - (getText(rows[j].cells[i]) - min) * step) + ' L';
      }
      paper.path(path).attr({
        stroke: colors[i]
      });
    }
  }

  function parseTable(table) {
    var caption = getText(table.caption).split('/'),
        thead = table.tHead.rows[0].cells,
        tbody = table.tBodies[0].rows,
        tfoot = table.tFoot.rows[0].cells[0],
        labels = paper.set(),
        bbox, i, l,
        colors = [];

    table.style.display = 'none';

    bbox = paper.text(15, 35, caption[0]).attr({
      'font-family': fontFamily,
      'font-size': 57,
      'font-weight': 'bold',
      'fill': '#369',
      'text-anchor': 'start'
    }).getBBox();
    paper.text(bbox.x + bbox.width, bbox.y + bbox.height - 18, '/ ' + caption[1]).attr({
      'font-family': fontFamily,
      'font-size': 14,
      'fill':...