0

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":

enter image description here

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!

cubanGuy
  • 1,226
  • 3
  • 26
  • 48
  • 1
    Looks like a CSS-only issue. Maybe if you wrap your `#graficos` elements inside another div. And why are you iterating over ONE element? `barras` is just one div. EDIT: I see what you did there. But again, you can have `barras.css('color', colors[i])`, where: `colors` must be declared outside the `SPSFilterNode` loop, `i` too must be declared outside with an increment inside. – cr0ss May 22 '14 at 13:14
  • Thanks! I followed your suggestions, but... still shows upside down. – cubanGuy May 22 '14 at 14:50
  • I was stackoverflowing for you and found [this](http://stackoverflow.com/questions/2743989/vertically-aligning-divs post. Turns out, you need to align a div vertically, and you can't do that unless you have all the heights. – cr0ss May 22 '14 at 15:07
  • As a side note, you can always have a `maxHeight`, with the value of the maximum height of each div, have a wrapper for each one, like `
    `. Gonna try to produce a Fiddle for you
     – cr0ss May 22 '14 at 15:10

1 Answers1

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".

Christophe
  • 27,383
  • 28
  • 97
  • 140
  • Thanks, but it didn't work either. This is really driving crazy! I'm about to change from height to width and stach them one on top of the other using divs or UL, it is not what I want, but I can't figure this out. – cubanGuy May 23 '14 at 16:12
  • @cubanGuy I edited the answer and added a proof of concept, plus a note on an issue with your original code. – Christophe May 23 '14 at 18:47
  • Thanks Christophe. I actually noticed the id issue this morning and I fixed it in my code, but forgot to change it here. I'll give a try to your concept when I get back to the office next week. – cubanGuy May 24 '14 at 01:51
  • Thansk! It worked perfectly. I just made a very small modification to your code: ` var barras = '
    '+$(this).attr("ows_Names")+'
    ';`     – cubanGuy May 27 '14 at 12:05