Centered bars

by Plippie Plop

HTML

<script src="//rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="//rawgit.com/flot/flot/master/jquery.flot.resize.js"></script>
 <div id="placeholder" style="width:600px;height:300px;"></div>



<script src="//rawgit.com/flot/flot/master/jquery.flot.categories.js"></script>
<script src="//rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>
<script src="//rawgit.com/flot/flot/master/jquery.flot.stack.js"></script>
<script src="//rawgit.com/flot/flot/master/jquery.flot.pie.js"></script>

JavaScript

var d1 = [
    {data: [[0, 1]]},
    {data: [[1, 1]]},
    {data: [[2, 2]]},
    {data: [[4, 2]]},
    {data: [[5, 4]]},
    {data: [[7, 1]]}
];

var d2 =[{"label":"One","color":"#FF0000","data":[[1,"10"]]},
         {"label":"Twoe","color":"#FF0000","data":[[2,"20"]]},
         {"label":"three","color":"#FF0000","data":[[3,"30"]]}
        ];


var placeholder = $("#placeholder");

// plot it
var plot = $.plot(placeholder, d2,{
     colors:[],
    canvas:true,
    xaxis:{
        tickDecimals:0,
        min:0,
        ticks:[[1,"One"],[2,"Two"],[3,"Three"]]
    },
 
        series: {
            color:"#00FF00",
             stack: false, // true,
             lines: {
                show: false, 
                steps: false
                 
             },
             bars: {
                show: true, 
                barWidth: 1,                
                align: "center",
                fill: true,
                order:0
            }             
        },
    xaxis:{
         axisLabelUseCanvas: false
        ,ticks:[[1,"One"],[2,"Two"],[3,"Three"],[4,"Four"]]
    },
        grid: {
            color: '#aaa',           
            hoverable: true,
            autoHighlight: false
        },
        legend: {
            show: true,
            position: "ne"
        },
   
       
  });