function draw_graph(container_id, values, colours) {
  var width = 664,
      height = 250,
      leftgutter = 0,
      bottomgutter = 20,
      topgutter = 1,
      label_count = 10;
      
  var max = $H(values).collect(function(values) { return values[1] }).flatten().max();
  var data_size = $H(values).collect(function(values) { return values[1] }).max().length;
  
  var X = (width - leftgutter) / data_size,
      Y = (height - bottomgutter - topgutter) / (max + (max / 5));
  var r = Raphael(container_id, width, height);

  var txt = {"font": '9px "Arial"', stroke: "none", fill: "#fff"},
      txt2 = {"font": '12px "Arial"', stroke: "none", fill: "#000"};

  r.drawGrid(leftgutter + X * .5, topgutter, width - leftgutter - X, height - topgutter - bottomgutter, data_size - 1, 10, "#333");
  
  $H(values).each(function(graph_details, i) {
    var label = graph_details[0];
    var data = graph_details[1];
    var colour = colours[label];
    var path = r.path({stroke: colour, "stroke-width": 4, "stroke-linejoin": "round"}),
        bgp = r.path({stroke: "none", fill: colour, opacity: .2}).moveTo(leftgutter + X * .5, height - bottomgutter),
        dots = r.group(),
        cover = r.group(),
        frame = dots.rect(10, 10, 100, 40, 5).attr({fill: "#000", stroke: "#474747", "stroke-width": 2}).hide();

    for (var i = 0; i < data.length; i++) {
      var y = Math.round(height - bottomgutter - Y * data[i]),
          x = Math.round(leftgutter + X * (i + .5));

      bgp[i == 0 ? "lineTo" : "cplineTo"](x, y, 10);
      path[i == 0 ? "moveTo" : "cplineTo"](x, y, 10);
      var dot = dots.circle(x, y, 5).attr({fill: colour, stroke: "#000"});
      var rect = r.rect(leftgutter + X * i, 0, X, height - bottomgutter).attr({stroke: "none", fill: "#fff", opacity: 0});
    }
    
    bgp.lineTo(x, height - bottomgutter).andClose();
    frame.toFront();
  })
}