KendoUI Chart Data XAxis

by Erik Zanker

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>

<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>

JavaScript

var data = [
   {"date":"2014/06/01","count":4588},
   {"date":"2014/06/08","count":4500},
   {"date":"2014/06/15","count":4356},
   {"date":"2014/06/22","count":4750}
];
function createChart() {
    
    var theDataSource = new kendo.data.DataSource({
            data: data,
            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        }
                    }
                }
            }       
    });
    
    $("#chart").kendoChart({
        dataSource: theDataSource,
        title: {
            text: "API Calls"
        },
        series: [{
            type: "column",
            field: "count",
        }],
        categoryAxis: {
            baseUnit: "weeks",
            field: "date",
            majorGridLines: {
                visible: false
            }
        },
        valueAxis: {
            line: {
                visible: false
            },
            title: {
                text: "# of calls"
            }
        },
        tooltip: {
            visible: true,
            format: "{0}"
        }
    });

        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);