Friday, May 23, 2014

How to create horizontal bar jqplot with two stacked series

Create jqplot horizontal bar with 2 stacked series please use js snippet below:<br /> Point labels will be displayed only for the second series right most position.<br />










URL for jqplot  Download

You will need following libs

<script language="javascript" type="text/javascript" charset="utf8" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" charset="utf8" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" charset="utf8" src="jqplot.pointLabels.min.js"></script>

var series1 = [12,12,13];
var series2 = [23,24,25];
var series3 = ['title1', 'title2', 'title3'];
 plot = $.jqplot('chartdiv', [series1, series2], {title: 'Plot Title',
            // Tell the plot to stack the bars.
            animate: !$.jqplot.use_excanvas,
            stackSeries: true,
            series:[
                {label:'', pointLabels:{labels: ['','','']}},
                {label:'', pointLabels:{labels: series3}}
            ],
            grid:{borderColor:'transparent',shadow:false,drawBorder:false,shadowColor:'transparent'},
            seriesColors: ["#FF6600","#993300"],
            seriesDefaults:{
                pointLabels:{
                    stackedValue : true,
                    show: true
                },
                renderer:$.jqplot.BarRenderer,
                rendererOptions: {
                    barMargin: 20,
                    barDirection: 'horizontal',
                    barPadding: 15,
                    barWidth: 20
                  }
            },
            axes: {
                xaxis: {
                    rendererOptions: {
                        drawBaseline: false
                    },
                    tickOptions: {
                        showGridline: false,
                        showMark: false,
                        showLabel: false,
                        shadow: false
                    }
                },
                yaxis: {
                    rendererOptions: {
                        drawBaseline: false
                    },
                    tickOptions: {
                        showGridline: false,
                        showMark: false,
                        showLabel: false,
                        shadow: false
                    }
                }
            }
        });

No comments:

Post a Comment