Render Jqplot Bar Graph Horizontally

I have this jqplot bar graph. The current display of the bars are shown vertically, I wanted to display it horizontally.

How do I set the jqplot properties so I can make the g开发者_运维百科raph disply horizontally and preserve the output with the percent values?

I hope you help me do this. Thanks :)

Here is the code

Attached Scirpts

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script src="../jquery-1.4.4.min.js" language="javascript" type="text/javascript" ></script>
<script src="../jquery.jqplot.js" language="javascript" type="text/javascript" ></script>
<script src="../plugins/jqplot.categoryAxisRenderer.js" language="javascript" type="text/javascript" ></script>
<script src="../plugins/jqplot.dateAxisRenderer.js" language="javascript" type="text/javascript" ></script>
<script src="../plugins/jqplot.barRenderer.js" language="javascript" type="text/javascript" ></script>
<script src="../plugins/jqplot.pointLabels.js" language="javascript" type="text/javascript" ></script>

JQuery Initialization

$(document).ready(function(){
    $.jqplot.config.enablePlugins = true;       
    line1 = [20, 0];
    plot2 = $.jqplot('chart2', [line1], { 
        seriesColors: ["#82BC24","#363636"],
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions:{barMargin: 25}, 
            yaxis:'y2axis',
            shadow: false
        },
        axes: {
            xaxis:{
                ticks:[2010, 2040], 
                renderer:$.jqplot.CategoryAxisRenderer, 
                tickOptions:{markSize:0}
            },
            y2axis:{ticks:[0, 100], tickOptions:{formatString:'%d\%'}}
        }
    });
});

The HTML

<div id="chart2" class='plot' style="margin-top:20px; 
    margin-left:20px; width:200px; height:200px;">
</div>

$(document).ready(function(){        
    $.jqplot.config.enablePlugins = true;     

    plot = $.jqplot('chart1', [[[60,'Nike'],[50,'Addidas'],[30,'Converse']]], {
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            shadowAngle: 135,
            rendererOptions: {
                barDirection: 'horizontal',
                barWidth:15,
                barMargin: 25
            }
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                tickOptions:{
                    showGridline:true, 
                    markSize:0
                }
            },
            xaxis:{
                ticks:[0,100],
                tickOptions:{formatString:'%d\%'}
            }
        }
    });
    // this line would append the % sign on the end of the values
    $('.jqplot-point-label').append('%');

});

According to the jqplot site, there's a barDirection option which can be specified as horizontal. Try rendererOptions:{barDirection:'horizontal', barMargin: 25}, in your code.

$(document).ready(function(){       

data = [[10,' '],[100,', Test1'],[250,'Test2'],[62,' Test3'],[95,'Test4'],
        [20,'Test5'],[66,'Test6'],[25,'Test7'],[0,'Test8']};


$.jqplot.config.enablePlugins = true;     

$('#barchartdisplay').jqplot([data], {
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        shadowAngle: 135,
        rendererOptions: {
             barDirection: 'horizontal',
             barWidth:15,
             barMargin: 25,
             varyBarColor: true
        }
    },                  
    axesDefaults: {
        //tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {                       
        fontSize: '8pt'
        }
    },
    axes: {
        yaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        tickOptions:{
        showGridline:true, 
        markSize:0
        }
    },
    xaxis: {
        //ticks:[0,100],
        tickOptions:{formatString:'%d', fontSize: '8pt'}                        
        }
});