getJSON to update progress bar

Question

Trying to get this progress bar on Bootstrap to show real-time progress from a JSON API, while also showing the % of goal achieved:

Here is how it looks right now: http://puu.sh/jt2Gu/823f6a6a0f.png

Both progress bars should be centered on the page and the progress itself isnt updating and I'm not sure why, please help?

• progress bar for coins sold
• progress bar for amount raised
• % funded (should be on top of picture)

CSS:

}
.progress {
    position: absolute;
    top: 80%;
    z-index: 2;
    text-align: center;
    width: 50%;

}

HTML:

 <div class="container">
    <div class="banner-buynow">
        <div class="col-md-2 col-md-offset-3 object-non-visible"
        data-animation-effect="fadeIn">
            <a class="btn btn-info" href="javascript:void(0);" onclick=
            "opentac();">Buy Now<br>

            <div class="ratebtc"></div></a>
        </div>

        <div class="progress">
            <div class="progress-bar active progress-bar-striped active">
                <div class="percentage-label"></div>
            </div>
        </div>
    </div>

    <div class="progress">
        <div class=
        "progress-bar progress-bar-success progress-bar-striped active"
        style="width:1%">
            <div class="goal-label"></div>
        </div>
    </div>
</div>

<div class="funded-label"></div>

JS

 $.getJSON("https://www2.shapeshift.io/crowdsales", function (json) {
    var soldT = Math.round(json.sold);
    var left = json.remaining;
    var total = Math.round(soldT+left);
    var ratebtc = json.rateT;
    var percent = Math.round(soldT/total*100);
    var backers = json.orders;
    var raisedtotal = Math.round(json.raised) + ' BTC';
    var goal = Math.round(raisedtotal/730);
    var percentsold = Math.round(percent) + '%';
    var backers = json.orders + ' backers';
    var funded = Math.round(json.raised/730*100);
    $('.progress-bar').css('width', percentsold);
    $('.percentage-label').html(soldT + "  coins sold ");
    $('.ratebtc').html(ratebtc );  
    $('.backers').html(raisedtotal + " from " + backers );
    $('.progress-bar-success').css('width', goal);
    $('.goal-label').html(raisedtotal + " towards goal of 730 BTC");
    $('.funded-label').html(funded + " % funded");
}); 

JSFiddle: https://jsfiddle.net/qy1ko5xf/

Answer 1

you can add the div with the class funded-label inside the container if you want it to be at the bottom of the container. give it an absolute position.

here's the updated HTML

<div class="container">
    <div class="banner-buynow">
        <div class="col-md-2 col-md-offset-3 object-non-visible"
        data-animation-effect="fadeIn">
            <a class="btn btn-info" href="javascript:void(0);" onclick=
            "opentac();">Buy Now<br>

            <div class="ratebtc"></div></a>
        </div>
            <br/>
        <div class="progress">
            <div class="progress-bar active progress-bar-striped active">
                <div class="percentage-label"></div>
            </div>
        </div>
    </div>

    <div class="progress">
        <div class=
        "progress-bar progress-bar-success progress-bar-striped active"
        style="width:1%">
            <div class="goal-label"></div>
        </div>
    </div>
<div class="funded-label"></div>        
</div>

the CSS for the funded-label div should look like this

.funded-label{
    color: white; 
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    background-color: #003a74;
    width: 100%;
    text-align: left;
    padding: 5px;
}

and finally here' the updated JS

$(function(){
     $.getJSON("https://www2.shapeshift.io/crowdsales", function (json) {
         console.log(json);
        var soldT = Math.round(json.sold);
        var left = json.remaining;
        var total = Math.round(soldT+left);
        var ratebtc = json.rateT;
        var percent = Math.round(soldT/total*100);
        var backers = json.orders;
        var raised = Math.round(json.raised);
        var raisedtotal = raised + ' BTC';
        var goal = Math.round((raised/730) * 100);
         console.log(goal);
        var percentsold = Math.round(percent) + '%';
        var backers = json.orders + ' backers';
        var funded = Math.round(raised/730*100);
        $('.progress-bar').css('width', percentsold);
         console.log(soldT);
         console.log(total);
        $('.percentage-label').html(soldT + "  coins sold ");
        $('.ratebtc').html(ratebtc );  
        $('.backers').html(raisedtotal + " from " + backers );
        $('.progress-bar-success').css('width', goal + '%');
        $('.goal-label').html(raisedtotal + " towards goal of 730 BTC");
        $('.funded-label').html(funded + " % funded");
    }); 

});

here's a working JSFIDDLE . hope this helps.