gRaphael drawing it wrong

This is the basic use of gRaphael.linechart from the official demo, it seems that using it with milliseconds as x starts to throw it off, more-so with just 2 data points.

HTML

<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/raphael-min.js"></script>
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/g.raphael-min.js"></script>
<script src="http://blog.fruitsoftware.com/wp-content/raphaeljs/g.line-min.js"></script>
<div class="holder" id="holder"></div>
<div class="holder" id="holder2"></div>

CSS

.holder {
    height: 300px;
    width: 400px;
}

JavaScript

var r = Raphael("holder"),
txtattr = { font: "12px sans-serif" };
var r2 = Raphael("holder2"),
txtattr2 = { font: "12px sans-serif" };
                
var x = [], y = [], y2 = [], y3 = [];

var demoX = [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]];
var demoY = [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]];

var xVals = [1288885800000, 1289929440000, 1290094500000, 1290439560000, 1300721700000, 1359499228000, 1359499308000, 1359499372000];
var yVals = [80, 76, 70, 74, 74, 78, 77, 72];
var xVals2 = [1288885800000, 1289929440000];
var yVals2 = [80, 76];

//r.text(160, 10, "Symbols, axis and hover effect").attr(txtattr);
var lines = r.linechart(10, 10, 300, 220, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })
	.hoverColumn(function () {
        this.tags = r.set();
        var j = 1;
        for (var i = 0, ii = this.y.length; i < ii; i++) {
            console.log(j);   
            this.tags.push(r.tag(this.x, this.y[i], this.values).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
                         }
        
        }, function () {
            this.tags && this.tags.remove();
            });
            
lines.symbols.attr({ r: 3 });