Edit in JSFiddle

$(document).ready(function() {
    var i = 0;
    var data = [[]];
    var renderer = function() {
        //create random data to plot
        for (i = 0; i < 15; i++) {
            data[0].push([i, Math.random()]);
        }
        i = 15;
        return data;
    };

    //create the chart
    var options = {
        dataRenderer: renderer,
        seriesDefaults: {
            rendererOptions: {
                smooth: true,
                animation: {
                    show: false
                }
            },
            pointLabels: {
                show: true,
                seriesLabelIndex: 2,
                edgeTolerance: -100
            }
        },
        cursor: {
            show: true,
            showVerticalLine: true,
            showHorizontalLine: true,
            zoom: false
        }
    };
    var plot1 = $.jqplot('chart1', [[]], options);

    //in every 5s interval replot the graph with newData            
    var intervalId = setInterval(function() {
         //remove the first element from the data array
        data[0].shift();
        //add a new element to the end of the array
        data[0].push([i++, Math.random()]);
        plot1.series[0].data = data[0];
        plot1.resetAxesScale();
        plot1.replot();
        console.log(data);
    },5000);

    $("#chart1").bind("jqplotDataClick", function(ev, si, pi, currData) {
        currData[2] = prompt("Annotation:") || data[2];
        data[0][pi]=currData;
        plot1.resetAxesScale();
        plot1.replot();
    });

    //toggle the css class of the chart on button click
    $("#flipbutton").click(function() {
        if ($('#chart1').hasClass('vertical')) {
            $("#chart1").removeClass("vertical");
            plot1.setVertical(false);
        } else {
            $("#chart1").addClass("vertical");
            plot1.setVertical(true);
        }
        plot1.replot();
    });
});

<input type=submit value="Flip orientation" id="flipbutton">
<div id="chart1"></div>

#flipbutton{
    position: relative;
    top: 5px;
    left: 5px;
}

#chart1{
    height: 300px;
    width: 700px;
    position: relative;
}

.vertical{
    position: relative;
    top: 200px ;
    -webkit-transform: rotate(90deg);  /* Safari 3.1+, Chrome */
    -moz-transform: rotate(90deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(90deg);  /* IE9 */
    -o-transform: rotate(90deg);  /* Opera 10.5-12.00 */
    transform: rotate(90deg);  /* Firefox 16+, Opera 12.50+ */
}

.jqplot-xaxis-tick{
    padding: 5px 10px 10px 10px;   
}

.vertical .jqplot-xaxis-tick{
    padding: 5px 10px 10px 10px;
    -webkit-transform: rotate(-90deg);  /* Safari 3.1+, Chrome */
    -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(-90deg);  /* IE9 */
    -o-transform: rotate(-90deg);  /* Opera 10.5-12.00 */
    transform: rotate(-90deg);  /* Firefox 16+, Opera 12.50+ */
}

.jqplot-yaxis-tick{
    padding: 5px 10px 10px 10px;
}

.vertical .jqplot-yaxis-tick{
    padding: 5px 10px 10px 10px;
    -webkit-transform: rotate(-90deg);  /* Safari 3.1+, Chrome */
    -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(-90deg);  /* IE9 */
    -o-transform: rotate(-90deg);  /* Opera 10.5-12.00 */
    transform: rotate(-90deg);  /* Firefox 16+, Opera 12.50+ */
}

.vertical .jqplot-point-label{
    -webkit-transform: rotate(-90deg);  /* Safari 3.1+, Chrome */
    -moz-transform: rotate(-90deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(-90deg);  /* IE9 */
    -o-transform: rotate(-90deg);  /* Opera 10.5-12.00 */
    transform: rotate(-90deg);  /* Firefox 16+, Opera 12.50+ */
}