Gantt Diagram

by Ivan Gerasimenko

HTML

<div id="diagram_1" class="gantt_diagram">
    <div>
        <div>Task/Time</div>
        <div><div></div></div>
    </div>
</div>

CSS

div.gantt_diagram {
    display: table
}
div.gantt_diagram > div {
    display: table-row
}
div.gantt_diagram > div > div {
    display: table-cell;
    height: 20px;
}
div.gantt_diagram > div > div:first-child {
    width: 100px;
    background: #cccccc;
    padding: 7px;
    border-bottom: solid 1px #ffffff;
}
div.gantt_diagram > div > div:last-child {
    border-bottom: solid 1px #cccccc;
    border-right: solid 1px #cccccc;
    padding-left: 18px;
}
div.gantt_diagram > div:not(:first-child) > div:last-child {
    padding: 7px 10px 0 10px;
    background: url('http://farm8.staticflickr.com/7442/10705467085_d8e092119e_t.jpg');
    background-position-x: 11px;
}
div.gantt_diagram > div:last-child > div:first-child {
    border-bottom: solid 1px #cccccc;
}
div.gantt_diagram > div:first-child > div:last-child {
    border-top: solid 1px #cccccc;
}
div.gantt_diagram > div:first-child > div:first-child {
    font-weight: bold;
}
div.gantt_diagram > div:first-child > div:last-child > div{
    display: table-cell;
    text-align: right;
    height: 100%;
    width: 42px;
    font-size: 12px;
}
div.gantt_diagram > div > div:last-child > div {
    height: 65%;
    font-size: 12px;
    text-align: center;
}

JavaScript

var data = [{
    id: 1,
    name: "Build House",
    duration: "50",
    color: "#008800"
}, {
    id: 2,
    name: "Plant Tree",
    duration: "55",
    color: "#008880"
}, {
    id: 3,
    name: "Grow Son",
    duration: "135",
    color: "#800080"
}, ];
            
            
(function( $ ){
    $.fn.SetGanttDiagram = function(obj) {
        var leftIndent = 0;
        for (item in obj) {
        this.append(
            "<div>\
                <div>"+obj[item].name+"</div>\
                <div>\
                    <div style='background: "+obj[item].color+";\
                    width: "+obj[item].duration+"px;\
                    margin-left: "+leftIndent+"px'>\
                    </div>\
                </div>\
             </div>");
        leftIndent += parseInt(obj[item].duration);
}
        
        var timeBarWidth = 
            this.find("div:first-child > \
                        div:last-child > div").width();
        this.find("div:first-child > \
            div:last-child > div").remove();
        
        for(var i=1; i<leftIndent/timeBarWidth; i++){
            this.find("div:first-child > div:last-child").append(
            "<div>"+i*20+"</div>");
        }
    };
})( jQuery );
            

$("#diagram_1").SetGanttDiagram(data);