visualize timeseries data that changes in small intervals with javascript / jqplot

I try to visualize some data, that changes in very short intervals from second to second, with a simple line chart in a browser with javascript (testData).

I have tried it with jqplot, see code above. The problem is that it seems that the interval between the times is too small for jqplot...the browser crashes every time when i try to create the graph.

Any ideas? A nice zoom function like this would also be nice:

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

1.) Is there a way to do this with jqplot? What do i wrong?

Update: See better fiddle here: http://jsbin.com/onufih/9/

html:

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

Here's my js-code:

$(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
    }
});

});

Solution

Please load all the required js files for rendering axis

<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>

EDIT :

There is some exception or infinite loop is coming in the automatic calculation of ticks for the chart. What you can do is write a function to calculate the tick points and give it for ticks property in axis options. An example function is given below which will select all the points in the data as tick points.

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
    }
}
...

demo: http://jsbin.com/onufih/6/edit

You can modify this function in such a way that it will return an array of equidistant points between first time stamp and the last.