$(document).ready(function() {
var i = 0;
var data = [[]];
var renderer = function() {
//create random data needed for the initial plot
for (i = 0; i < 15; i++) {
data[0].push([i, Math.random()]);
}
i = 15;
return data;
};
//create the chart
var plot1 = $.jqplot('chart1', [[]], {
dataRenderer: renderer,
seriesDefaults: {
rendererOptions: {
smooth: true,
animation: {
show: true
}
}
}
});
//in every 5s interval replot the graph with newData (new random data)
var intervalId = setInterval(function() {
var newData = new Array();
newData = data;
//remove the first element from the data array
newData[0].shift();
//add a new element to the end of the array
newData[0].push([i++, Math.random()]);
plot1.series[0].data = newData[0];
plot1.resetAxesScale();
plot1.replot();
}, 5000);
});
//toggle the css class of the chart on button click
$("#flipbutton").click(function() {
$("#chart1").toggleClass("vertical");
});
<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+ */
}
.vertical .jqplot-xaxis-tick{
-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-yaxis-tick{
-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+ */
}
External resources loaded into this fiddle: