Flot Vertical 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://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="https://envato.stammtec.de/themeforest/melon/plugins/flot/jquery.flot.min.js"></script>
<script src="https://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="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: [
        [1, 300],
        [2, 300],
        [3, 300],
        [4, 300],
        [5, 300]
    ]
}, {
    label: 'Bar 2',
    data: [
        [1, 800],
        [2, 600],
        [3, 400],
        [4, 200],
        [5, 0]
    ]
}, {
    label: 'Bar 3',
    data: [
        [1, 100],
        [2, 200],
        [3, 300],
        [4, 400],
        [5, 500]
    ]
}, ];

var options = {
    series: {
        stack: 1,
        bars: {
            order: 1,
            show: 1,
            barWidth: 0.1,
            fill: 0.8,
            align: 'center',
        },
    },
    grid: {
        hoverable: true,
        borderWidth: 0
    },
    tooltip: true,
    tooltipOpts: {
        cssClass: "flotTip",
        content: "%s: %y",
        defaultTheme: false
    },
    legend: {
        show: true
    },
    xaxis: {
        ticks: [
            [1, 'One'],
            [2, 'Two'],
            [3, 'Three'],
            [4, 'Four'],
            [6, 'Five']
        ]
    },
};

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