Question

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 graph 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>

Answer 1

$(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('%');

});