Kendo UI Chart X-Axis in hours

Question

Here is my sample data:

[
  {
    "EventDate": "2015-06-03T07:00:00Z",
    "Average": 5.4,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T08:00:00Z",
    "Average": 4.7,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T09:00:00Z",
    "Average": 5.9,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T10:00:00Z",
    "Average": 4.2,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T11:00:00Z",
    "Average": 4.5,
    "Minimum": 0,
    "Maximum": 0,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T12:00:00Z",
    "Average": 4,
    "Minimum": 1,
    "Maximum": 9,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  },
  {
    "EventDate": "2015-06-03T13:00:00Z",
    "Average": 5,
    "Minimum": 2,
    "Maximum": 8,
    "WebsiteName": "microsoft.com",
    "PageName": "About"
  }
]

I want my x-axis to be "EventDate" and my y-axis to be Average. However, I can't get Kendo UI chart to load the data. I am loading the data from a remote web service. Here's what the data source looks like:

            dataSource: {
                transport: {
                    read: {
                        url: "[[myurl-that-returns-the-above-json]]",
                        dataType: "json"
                    }
                },
                sort: {
                    field: "year",
                    dir: "asc"
                }
            },

Here is how I have my series configured:

                    series: [{
                        type: "area",
                        field: "Average",
                        categoryField: "EventDate"
                    }],
                    categoryAxis: {
                        baseUnit: "hours"
                    }

The resulting graph literally has nothing on the x-axis and the y-axis has the following markers: {0,0.2,0.4,0.6,0.8,1,1.2} . They appear to be junk. Telerik has no examples where they load hours based data.

UPDATE:

I added the data type to the schema model but it has no effect.

                $("#chart").kendoChart({
                    dataSource: {
                      transport: {
                          read: {
                              url: "https://microsoft-apiapp4bf6da9800604266849e3177658fa1d2.azurewebsites.net:443/api/PageLoadMetric?webSiteName=microsoft.com&pageName=About",
                              dataType: "json"
                          }
                      },
                      schema: {
                            model: {
                            fields: {
                              EventDate: {
                                type: "date"
                              }
                            }
                          }
                      }
                    },
                    series: [{
                        type: "area",
                        field: "Average",
                        categoryField: "EventDate"
                    }],
                    categoryAxis: {
                        baseUnit: "hours"
                    }
                });

DEMO

Answer 1

Try telling the dataSource that EventData is a date type field:

var theDataSource = new kendo.data.DataSource({
        data: data,
        schema: {
            model: {
                fields: {
                    EventDate: {
                        type: "date"
                    }
                }
            }
        }       
});

$("#chart").kendoChart({
    dataSource: theDataSource,
    series: [{
        type: "area",
        field: "Average",
        categoryField: "EventDate"
    }],
    categoryAxis: {
        baseUnit: "hours",
    },
});

DEMO