Flot Horizontal Bar Chart Example

FOr more description http://www.flotcharts.org/

HTML

<script src="http://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="http://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>

<div id="hbar-placeholder" class="flot"></div>

CSS

.flot {
    left: 0px;
    top: 0px;
    width: 610px;
    height: 250px;
}
#flotTip {
    padding: 3px 5px;
    background-color: #000;
    z-index: 100;
    color: #fff;
    opacity: .80;
    filter: alpha(opacity=85);
}

JavaScript

var data = [{
    label: 'Bar 1',
    data: [
        [300, 1],
        [300, 2],
        [300, 3],
        [300, 4],
        [300, 5]
    ]
}, {
    label: 'Bar 2',
    data: [
        [800, 1],
        [600, 2],
        [400, 3],
        [200, 4],
        [0, 5]
    ]
}, {
    label: 'Bar 3',
    data: [
        [100, 1],
        [200, 2],
        [300, 3],
        [400, 4],
        [500, 5]
    ]
}, ];
console.log(data);
var options = {
    series: {
        stack: 1,
        bars: {
            order: 1,
            show: 1,
            barWidth: 0.2,
            fill: 0.8,
            align: 'center',
            horizontal: true
        },
    },
    grid: {
        hoverable: true,
        borderWidth: 0
    },
    tooltip: true,
    tooltipOpts: {
        cssClass: "flotTip",
        content: "%s: %y",
        defaultTheme: false
    },
    legend: {
        show: true
    },
    yaxis: {
        ticks: [
            [1, 'One'],
            [2, 'Two'],
            [3, 'Three'],
            [4, 'Four'],
            [5, 'Five']
        ]
    },
};

$.plot($("#hbar-placeholder"), data, options);