Using SPservices to create Bar Chart, but it shows upside down

Question

This is may sound like a very simple question for some of you, but I'm very new programming. I'm pulling data from a SharePoint list using SPServices GetListItems. This is the js:

$(document).ready(function () {
var colors = ["#5179D6", "#66CC66", "#EF2F41", "#FFC700", "#61BDF2", "#FF7900",  "#7588DD", "#2F5E8C", "#07BACE", "#BAE55C", "#BA1871", "#FFFFCC",   "#BDE6FC", "#C7C7C7", "#ADA8FF", "#2FA675"];
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Test",
    CAMLViewFields: "<ViewFields><FieldRef Name='Person' /><FieldRef Name='Age' /><FieldRef Name='Earnings' /><FieldRef Name='Names' /></ViewFields>",
    completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
            var theheight = $(this).attr("ows_Earnings") + 'px';
            var barras = '<div class="barras" style="height:' + theheight + '">' + $(this).attr("ows_Names") + '</div>';
            $('#graficos').append(barras);
            ////////


            $('.barras').each(function (idx) {
                $(this).css({ 'background': colors[idx % 16] });
            });
            });
    } //end of completeFunc

}); //end of SPServices
}); //end of jQuery function

And this is the HTML:

<div id="graficos" style="height:500px"></div>

I can pull the data with no issues and create the bars. The issue I'm having is that the bars look "upside down":

I would like the "flat" part to be in the bottom. I apologize if this looks like a uneducated question (which it is!), but I haven't been able to figure it out. Thanks!

Answer 1

As you know the exact height of each div, you could adjust with a margin:

'<div class="barras" style="height:' + theheight + 'px; margin-top:' + (500-theheight) + 'px;">'

Proof of concept here: http://jsfiddle.net/EGCyU/

Important! In html, ids are unique, so you should not create multiple elements with the id "barras".