Kendo Chart Date Example - Example posted to Kendo forums

by Alex Azuero

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 newSeriesData = [{
    axis: "amount",
    name: "Amounts",
    type: "line",
    field: "Amount",
    data: [{
        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)}]},
{
    axis: "value",
    name: "Values",
    type: "line",
    field: "Amount",
    data: [{
        Amount: 100,
        Date: new Date(2011, 01, 01)},
    {
        Amount: 100,
        Date: new Date(2011, 02, 01)},
    {
        Amount: 100,
        Date: new Date(2011, 03, 01)},
    {
        Amount: 100,
        Date: new Date(2011, 04, 01)},
    {
        Amount: 100,
        Date: new Date(2011, 05, 01)},
    {
        Amount: 100,
        Date: new Date(2011, 06, 01)},
    {
        Amount: 100,
        Date: new Date(2011, 09, 01)},
    {
        Amount: 110,
        Date: new Date(2011, 10, 01)},
    {
        Amount: 120,
        Date: new Date(2012, 01, 01)},
    {
        Amount: 180,
        Date: new Date(2012, 02, 01)}]}];


var data = {
    series: newSeriesData,
    valueAxis: [{
        name: "amount",
        title: {
            "text": "Amount:"
        }},
    {
        name: "value",
        title: {
            text: "Value"
        }}],
    categoryAxis: { // http://docs.kendoui.com/api/dataviz/chart#categoryaxistype
        field: "Date",
        baseUnit: "months",
        labels: {
           ...