Simple KendoUI line chart

by slace

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="https://raw.github.com/aaronpowell/tbd/master/lib/tbd.js"></script>
<div id="chart"></div>

CSS

h1 { color: #f0a; }

JavaScript

var now = new Date();

var data = tbd.from({ })
            .prop('count').use(tbd.utils.range(100, 500)).done()
            .prop('date').use(tbd.utils.range(new Date(now.setDate(-7)), now)).done()
            .make(7);

$("#chart").kendoChart({
    title: {
        text: "Timeline"
    },
    dataSource:{
        data: data
    },
    series:[{
        type: "line",
        field: "count",
        name: "Some count"
    }],
    categoryAxis:{
        field: "date",
        labels: {
            template: function(data) { return data.value.toDateString(); }
        }
    },
   plotArea: {
       background: '#BADA55'
   },
    tooltip: {
        visible: true,
        template: function(data) { return '<h1>' + data.category.getDate() + '/' + (data.category.getMonth() + 1) + "/" + data.category.getFullYear() + '</h1><h2>' + data.value + '</h2>' }
    }
});