Edit in JSFiddle

var MINI = require('minified'); 
var $ = MINI.$, $$ = MINI.$$, EE = MINI.EE, _ = MINI._;

$(function() {
    var currentBarAnim, currentMoveAnim;
    
    function addBar() {
        // stop any animation that may be running
        if (currentMoveAnim)
            currentMoveAnim.stop();
        currentBarAnim = null;
        
        // move old bars 40px to the right
        currentMoveAnim = $('#barSpace .bar').animate(
            {$left: function(old, idx) { return (idx*50+65) + 'px'; }}, 500);
        
        // fade away last bar if more than 10, then remove it
        $('#barSpace .bar').only(10).animate({$$fade: 0}, 1000).then(function(e) { e.remove(); });

        // clear form field
        $('#num').set('value', '');
        
        // create <div class="bar"><div>0</div></div> 
        var e = EE('div', {$: 'bar'}, EE('div', 0));
        $('#barSpace').addFront(e);
        
        // register mouseover toggle
        e.onOver(e.toggle({$borderColor: '#f88'}, {$borderColor: '#400'}, 300));
    }
    
    function changeFirstBar(val) {
        var firstBar = $('#barSpace .bar').only(0);

        if (isNaN(val)) 
            return; 
        
        if (currentBarAnim)
            currentBarAnim.stop();

        // write percentage into bar's sub-div
        firstBar.select('div').fill(val);
        
        // change value, animated
        currentBarAnim = firstBar.animate({$top: 210-(2*val)+'px'}, 500);
    }

    $('form').on('submit', addBar);
    $('#num').onChange(changeFirstBar);
    
    // demo content
    addBar();
    changeFirstBar(30);
    addBar();
    changeFirstBar(89);
    addBar();
});

<div id="outer">
    <div id="lbl100"><span>100</span></div>
    <div id="l100"></div><div id="l75"></div><div id="l50"></div><div id="l25"></div>
    
    <div id="barSpace"></div>
    <div id="form">
        <form>
            <label for="num">Enter a number (0-100):</label> <input id="num" maxlength="3" size="3"/> 
            <button>Next</button>
        </form>
    </div>
</div>

body { font-family: sans-serif; }
#outer { position: relative; height: 270px; width: 90%; border: 1px solid #bbb; margin: 0.5em; overflow: hidden; }
#barSpace { position: absolute; margin: 10px 0; left: 50px; top: 0px; height: 210px; width: 90%;
    border-left: 1px solid #333; border-bottom: 1px solid #444; overflow: hidden; }
#l25, #l50, #l75, #l100 { position: absolute; left: 45px; width: 10px; height: 1px; background-color: #222; }
#l100 { top: 20px; width: 10px; height: 2px; }
#l75 { top: 70px; }
#l50 { top: 120px; height: 2px; }
#l25 { top: 170px; }
#lbl100 { position: absolute; display: table; top: 10px; font-size: 10px; left: 25px; height: 20px; }
#lbl100 span { display: table-cell; text-align: center; vertical-align: middle }
#form { position: absolute; bottom: 0px; margin: 10px; width: 100%; }

.bar { position: absolute; left: 10px; bottom: 0px; width: 35px; top: 200px; 
       background-color: #f00; color: #400; border: 3px solid #f88; font-size: 10px; overflow: hidden; }
.bar div { padding: 3px; }