Kendo dataGrid demo

Bars based on color/score values - auto- update tests

by jwstott

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">
<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="http://knockoutjs.com/downloads/knockout-3.0.0beta.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="http://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=" sparkline: exams "></td>
        </tr>
    </tbody>
</table>

JavaScript

ko.bindingHandlers.sparkline = {
    init: function (element, valueAccessor, all, vm, context) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            options = all().dataGrid || {};
        $(element).kendoChart({
            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'
            }]
        });

    },
    update: function (element, valueAccessor, all, vm, context) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever the associated observable changes value.
        // Update the DOM element based on the supplied values here.
        var value = ko.unwrap(valueAccessor());
        var x = value.map(function (i) {
            return {
                value: 1,
                userColor: i.color
            };
        });
        $(element).data('kendoChart').dataSource.data(x);
    }
};
var Students = [];
var Question = function () {};
var VM = function () {
    this.students = ko.observableArray(Students);
};

buildData();

var vm = new VM();
ko.applyBindings(vm);


setInterval(function () {
    var idx = randomScore(0, vm.students().length - 1);
    reCaclKO(idx);

}, 300);

function reCaclKO(idx) {
    var spark, stud = vm.students()[idx];
    var examIdx =...