Kendo sparkline demo

Bars based on color/score values

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.silver.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="//convey.blob.core.windows.net/cdn/knockout/knockout-kendo-0.6.2.min.js"></script>
<table id="examGrid" class="table table-striped">
    <thead>
        <tr>
            <th>Student</th>
            <th>ID</th>
            <th>Completed</th>
            <th>Overview</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: students">
        <tr height="60px">
            <td data-bind=" text: name "></td>
            <td data-bind="text: studentId "></td>
            <td>todo</td>
            <td width="30%" data-bind="kendoChart: { 
                
            data: exams, 
            axisDefaults: { visible: false, majorGridLines: { visible: false } }, 
            valueAxis: { min: 0, max: 1, majorGridLines: { visible: false }, visible: false }, 
            seriesDefaults: { 
                border: { width: 1 }, 
                gap: 1, 
                markers: { visible: false }, 
                stack: false, 
                type: 'column', 
                missingValues: 'gap' 
            },
            series: [{field: 'value', colorField: 'userColor'
            }]
...

JavaScript

var Students = [];
var Question = function () {};
var VM = function () {
    this.students = ko.observableArray(Students);
};
buildData();
console.dir(Students);
ko.applyBindings(new VM());

function buildData() {
    var tmp,t2,color,
    ids = 2045,
        examLen = 30,
        names = [
            'Gerardo Wildman',  
            'Noble Braswell',  
            'Karisa Lizarraga',
            'Lashandra Harsh',  
            'Ebonie Zajicek',  
            'Christy Escalan',  
            'Dannie Christy',  
            'Tamica Baxen',  
            'Deandre Putman',  
            'Kourtney Hobby',  
            'Dortha Henrich',  
            'Honey Burroughs',  
            'Jeni Lindstrom',  
            'Jamila Netto',  
            'Maximo Ambler',  
            'Yu Galindez',  
            'Rosie Wee',  
            'Mckinley Ober',  
            'Barbera Ciriaco',  
            'Stephani Blackwell',  
            'Idalia Roiger',  
            'Emmie Mcavoy',  
            'Minda Alba',  
            'Amelia Wess',  
            'Tosha Lammers',  
            'Nathaniel Rives',  
            'Rosario Keleher',  
            'Nohemi Shipp',  
            'Emelda Timlin',  
            'Darcel Wyble'],
        sampleRoster = [];
    names.forEach(function (stud) {
        ids++;
        tmp = {
            name: stud,
            studentId: ids,
            exams: [],
            mapExams: function () {
                return exams.length;
            }
        };
        for (var x = 0; x < examLen; x++) {
            /*
            tmp.exams.push({
                id: x,
                answerKey: randomKey(),
                score: randomScore(0,1)
            });
            */
            t2 = randomScore(0, 2);
            color = 'grey';
            if (t2 >0) {
                color = t2 == 1 ? 'red': 'green'
            }
            tmp.exams.push({value: t2 === 0 ? 0:1,userColor: color});
        }
       ...