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 id="testGraph" style="width:100%;height:auto;border:1px dashed #CCC;">

JavaScript

var count = 1;
window.onload = function() {
    
    var xVals = [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8],[2, 4, 8, 9, 7, 10]]; //data coube x1, courbe x2
    var yVals = [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28],[11, 22, 29, 21, 15, 10]]; //data
    
    var xVals2 = [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]]; //data coube x1, courbe x2
    var yVals2 = [[2, 10, 15, 5], [5, 9, 13, 15, 10	]]; //data
  			  
    //xvals,yvals,width,heigth,x,y,xlen,ylen
    line_char (xVals,yVals,500,220,10,10,400,250); //appeler funtion	
    
    line_char (xVals2,yVals2,400,220,10,10,200,150); //appeler funtion
                    
}
                
function line_char(xVals,yVals,width,height,x,y,xlen,ylen){
    
    //create div
    var div = document.createElement("div");
    div.id="div"+count;
    div.style.width = "auto";
    div.style.height ="auto";
    div.style.border = "1px solid #000";
    div.style.padding = "20px 10px";
    div.style.cssFloat="left";
    //div.style.position = "relative";
    document.body.appendChild(div);
    
    //create graph line
    var r = Raphael('div'+count,width+10,height+20); //x, y svg
    
    
    var lines = r.linechart(10, 10, width, height, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle",smooth: false }) 
    
    //**************label hover
    lines.hoverColumn(function () {
        this.tags = r.set();
        
        for (var i = 0, ii = this.y.length; i < ii; i++) {
            //text
            this.tags.push(r.label(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([ { fill: this.symbols[i].attr("fill")}]));
        }
    }, function () {
        this.tags && this.tags.remove();
    });
    
    // Draw horizontal gridlines
    for (var i = 0; i < lines.axis[1].text.items.length; i++) {
        r.path(['M', x+10, lines.axis[1].text.items[i].attrs.y, 'H', (xlen-20) + height]).attr({
            stroke : '#EEE'
        }).toBack();
    }
    
   ...