Timeline

by darcon77

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/black-tie/jquery-ui.css">
<div data-bind="foreach:routes">
    <span data-bind="text:duration"></span>
    <div data-bind="foreach:timeline" class="ui-helper-clearfix">
        <div data-bind="css:css, style:{width:width+'%'}" style="float:left">&nbsp;</div>
    </div>
</div>

CSS

.stop{background-color:red;}
.moving{background-color:green}

JavaScript

function RouteModel(datapoints, root) {
    var base = this;

    var tempArray = [];

    $.each(datapoints, function (k, v) {
        tempArray.push(new VehicleLocation(v, base));
    });

    base.locations = ko.observableArray(tempArray);
    base.duration = ko.computed(function () {
        var start = base.locations()[0];
        var end = base.locations()[base.locations().length - 1];
        var startTime = start.readingTime().getTime();
        var endTime = end.readingTime().getTime();

        //return (endTime - startTime)/1000;
        
        return 24*60*60;
    });
    base.timeline = ko.computed(function(){
        var tempArray = [];
        var prevTime = root.date;
        var prevSpeed=0;
        var duration = 0;
        
        $.each(base.locations(), function(k,v){
            duration = (v.readingTime().getTime()-prevTime)/1000;
            tempArray.push({width:duration/base.duration()*100, css:v.speed()==0?"stop":"moving"});
            
            prevTime = v.readingTime().getTime();
            prevSpeed=v.speed();
        });
        
        duration = (prevTime-root.date.setHours(23,59,59))/1000;
        tempArray.push({width:duration/base.duration()*100, css:prevSpeed==0?"stop":"moving"});
        
        return tempArray;
    });
    
};

function VehicleLocation(item, parent) {
    var base = this;

    ko.mapping.fromJS(item,{}, base);
};

var datapoints = [
    [{
        id: 1,
        speed: 0,
        readingTime: new Date("2014-03-01T10:00:00Z")
    }, {
        id: 2,
        speed: 10,
        readingTime: new Date("2014-03-01T10:10:00Z")
    }, {
        id: 3,
        speed: 12,
        readingTime: new Date("2014-03-01T10:11:00Z")
    }, {
        id: 4,
        speed: 0,
        readingTime: new Date("2014-03-01T10:12:00Z")
    }, {
        id: 5,
        speed: 15,
        readingTime: new Date("2014-03-01T12:00:00Z")
    }, {
        id: 6,
        speed: 20,
        readingTime: new...