Kendo Chart Date Example

by gavinr

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<div id="example" class="k-content">
    <div class="chart-wrapper">
        <div id="chart"></div>
    </div>
</div>

JavaScript

// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date
var seriesData = [{
    Amount: 66,
    Date: new Date(2011, 01, 01)},
{
    Amount: 67,
    Date: new Date(2011, 02, 01)},
{
    Amount: 68,
    Date: new Date(2011, 03, 01)},
{
    Amount: 90,
    Date: new Date(2011, 04, 01)},
{
    Amount: 100,
    Date: new Date(2011, 05, 01)},
{
    Amount: 150,
    Date: new Date(2011, 06, 01)},
{
    Amount: 20,
    Date: new Date(2011, 09, 01)},
{
    Amount: 50,
    Date: new Date(2011, 10, 01)},
{
    Amount: 160,
    Date: new Date(2012, 01, 01)},
{
    Amount: 180,
    Date: new Date(2012, 02, 01)}];

var data = {
    dataSource: {
        data: seriesData
    },
    series: [{
        name: "bills",
        field: "Amount"}],
    categoryAxis: { // http://docs.kendoui.com/api/dataviz/chart#categoryaxistype
        field: "Date",
        baseUnit: "months",
        labels: {
            dateFormats: {
                "months": "MMM 'yy"
            },
            step: 4
        },
        max: new Date(2012, 11, 1),
        // THIS IS AN ERROR IN THE DOCUMENTATION. THIS IS NOT A NUMBER
        min: new Date(2011, 0, 1),
        // THIS IS AN ERROR IN THE DOCUMENTATION. THIS IS NOT A NUMBER
        title: {
            // set the text of the title
            text: "Month/Year",
            // decreate the font size of the title to 14 px
            font: "14px Arial,Helvetica,sans-serif",
            // move the title to the bottom
            position: "bottom"
        }
    },
    seriesDefaults: {
        type: "line"
    }
};

function createChart() {
    $("#chart").kendoChart(data);
}

$(document).ready(function() {
    setTimeout(function() {
        // Initialize the chart with a delay to make sure
        // the initial animation is visible
        createChart();

    }, 400);
});