You can "flip" the X, Y axis using CSS. Assuming the chart name you
give is "chart1". Add the following to your page.
<style>
.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+ */
}
</style>
<script>
$( document ).ready(function() {
$("#chart1").toggleClass("vertical");
});
</script>
