使用javascript / jqplot可视化以小间隔变化的时间序列数据

我尝试可视化一些数据，这些数据以非常短的间隔从一秒到另一秒的变化，在浏览器中使用javascript (testData)使用简单的折线图。

我已经用jqplot试过了，见上面的代码。问题是，对于jqplot来说，时间间隔似乎太小了……每次我尝试创建图形时，浏览器都会崩溃。

任何想法?像这样的缩放函数也不错:

http://www.jqplot.com/deploy/dist/examples/rotatedTickLabelsZoom.html

1)。有办法做到这一点与jqplot?我错在哪里?

更新:在这里看到更好的提琴:http://jsbin.com/onufih/9/

html:

        <div id="overviewChart"></div>

这是我的js代码:

$(document).ready(function() {
// testData that works fine:
var testData = [['2008-10-29 10:00:00', 0], ['2008-10-30 10:00:10', 1]]; 
// testData that works not fine, time intervals are too small: 
var testData = [['2008-10-29 10:00:00', 0], ['2008-10-29 10:00:10', 1],
                ['2008-10-29 10:00:11', 0], ['2008-10-29 10:00:14', 1]];
var overviewChart = $.jqplot('overviewChart', [testData], {
    title : 'Rotated Axis Text',
    axes : {
        xaxis : {
            renderer : $.jqplot.DateAxisRenderer,
            rendererOptions : {
                tickRenderer : $.jqplot.CanvasAxisTickRenderer
            },
            tickOptions : {
                formatString : '%#m/%#d/%y - %#H h - %#M m - %#S s',
                fontSize : '10pt',
                fontFamily : 'Tahoma',
                angle : -40
            }
        },
        yaxis : {
            rendererOptions : {
                tickRenderer : $.jqplot.CanvasAxisTickRenderer
            },
            tickOptions : {
                fontSize : '10pt',
                fontFamily : 'Tahoma',
                angle : 30
            }
        }
    },
    series : [{
        lineWidth : 4,
        markerOptions : {
            style : 'square'
        }
    }],
    cursor : {
        zoom : true,
        looseZoom : true
    }
});
});

<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

function getTicks() {
    var ticks = [];
    for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var dateStr = item[0];
        ticks.push(dateStr);
    }
    return ticks;
}
...
xaxis: {
    renderer: $.jqplot.DateAxisRenderer,
    rendererOptions: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer
    },
    ticks: getTicks(), // use the function to get the array of tick points
    tickOptions: {
        formatString: '%#m/%#d/%y - %#H h - %#M m - %#S s',
        fontSize: '10pt',
        fontFamily: 'Tahoma',
        angle: -40
    }
}
...