Diagramme mit JQPlot

var s1 = [];
var s2 = [];
var plot1 = null;
//$(document).ready(function () {
//    s1.push([new Date().getTime(), 20]);
//    s2.push([new Date().getTime(), 30]);
//    update();
//});
$(function () {
//    s1.push([new Date().getTime(), Math.floor((Math.random() * 100) + 1)]);
//    s2.push([new Date().getTime(), Math.floor((Math.random() * 100) + 1)]);
//    plot();
    update();

    function update() {
        if (plot1 !== null) {
            plot1.destroy();
        }
        if (s1.length > 9) {
            s1.shift();
        }
        if (s2.length > 9) {
            s2.shift();
        }
        var date = new Date();
        s1.push([date.getTime(), Math.floor((Math.random() * 100) + 1)]);
        s2.push([date.getTime(), Math.floor((Math.random() * 100) + 1)]);
        plot();
        setTimeout(update, 3000);
    }
});
function plot() {
    plot1 = $.jqplot("chart", [s2, s1], {
        // Turns on animatino for all series in this plot.
        animate: true,
        // Will animate plot on calls to plot1.replot({resetAxes:true})
        animateReplot: true,
        cursor: {
            show: true,
            zoom: true,
            looseZoom: true,
            showTooltip: false
        },
        series: [
            {
                pointLabels: {
                    show: true
                },
                renderer: $.jqplot.BarRenderer,
                showHighlight: true,
                yaxis: 'y2axis',
                rendererOptions: {
                    // Speed up the animation a little bit.
                    // This is a number of milliseconds.  
                    // Default for bar series is 3000.  
                    animation: {
                        speed: 2500
                    },
                    barWidth: 20,
                    barPadding: -15,
                    barMargin: 0,
                    highlightMouseOver: true
                }
            },
            {
                rendererOptions: {
                    // speed up the animation a little bit.
                    // This is a number of milliseconds.
                    // Default for a line series is 2500.
                    animation: {
                        speed: 2000
                    }
                }
            }
        ],
        axesDefaults: {
            pad: 0
        },
        axes: {
            // These options will set up the x axis like a category axis.
            xaxis: {
                renderer: $.jqplot.DateAxisRenderer,
                rendererOptions: {
                    tickInset: 0.5
//                    minorTicks: 1
                },
                tickOptions: {
                    formatString: '%H:%M:%S'
                },
                min: s1[0][0],
                max: s1[0][s1.length]
//                tickInterval: '1 minute'
            },
            yaxis: {
                min: 0,
                max: 100,
                tickOptions: {
                    formatString: " "
                },
                rendererOptions: {
                    forceTickAt0: true
                }
            },
            y2axis: {
                min: 0,
                max: 100,
                tickOptions: {
                    formatString: "%d\%"
                },
                rendererOptions: {
                    // align the ticks on the y2 axis with the y axis.
                    alignTicks: true,
                    forceTickAt0: true
                }
            }
        },
        highlighter: {
            show: true,
            showLabel: true,
            tooltipAxes: 'y',
            sizeAdjust: 7.5, tooltipLocation: 'ne'
        }
    });
}


$("#buttonUpdate").click(function () {
    var time = new Date();
    plot1.destroy();
    if (s1.length > 9) {
        s1.shift();
    }
    if (s2.length > 9) {
        s2.shift();
    }
    s1.push([time.getTime(), Math.floor((Math.random() * 100) + 1)]);
    s2.push([time.getTime(), Math.floor((Math.random() * 100) + 1)]);
    plot();
});