Status page bar chart

Bar chart example for investingDIY.com

by Filly

HTML

<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.resize.js"></script>
<script src="http://joetsoi.github.io/flot-barnumbers/jquery.flot.barnumbers.js"></script>
<div id="placeholder" style="width:500px;height:200px;"></div>

JavaScript

var data = [{
        label: 'Cash',
        color: "#20A7DA",
        data: [
            [-1.4, 6]
        ]
    }, {
        label: 'Intl',
        color: "#D6FBB8",
        data: [
            [-7, 5]
        ]
    }, {
        label: 'US Bonds',
        color: "#81CC60",
        data: [
            [8.3, 4]
        ]
    }, {
        label: 'Intl',
        color: "#FEEEB5",
        data: [
            [-22, 3]
        ]
    }, {
        label: 'Intl',
        color: "#FEC145",
        data: [
            [-43, 2]
        ]
    }, {
        label: 'Intl',
        color: "#FE472A",
        data: [
            [65.1, 1]
        ]
    }];

    $.plot($("#placeholder"), data, {
        series: {
            bars: {
                horizontal: true,
                show: true,
                showNumbers: true,
                numbers: {
                    xAlign: function (x) {
                        if (x < 0) {
                            return x - 7;
                        } else {
                            return x + 7
                        }
                    },
                },
                barWidth: 0.6,
            }
        },
        grid: {
            borderWidth: 0
        },
        xaxis: {
            min: -100,
            max: 100,
            tickLength: 0,
            show: false
        },
        yaxis: {
            tickLength: 0,
            show: false
        }
    });