Kendo UI Line chart not refreshing

Question

I'm using Kendo Data viz and am passing JSON to an .NET MVC page to initialise the chart:

<div class="k-chart" id="SummaryWeekImportChart"></div>
$("#SummaryWeekImportChart").kendoChart(
        @Html.Raw(Model.KendoLineChartJson));

The JSON (important bits):

"dataSource":{
  "schema":{
     "model":{
        "fields":{
           "TotalValue":{
              "type":"number"
           },
           "SuccessValue":{
              "type":"number"
           },
           "ErrorValue":{
              "type":"number"
           },
           "Date":{
              "type":"date"
           },
           "Category":{
              "type":"string"
           },
           "ToolTip":{
              "editable":false,
              "type":"string"
           }
        }
     }
  },
  "data":[
     {
        "TotalValue":0,
        "SuccessValue":0,
        "ErrorValue":0,
        "Date":"2013-10-18T00:00:00",
        "Category":"18/10/2013",
        "ToolTip":"18/10/2013"
     },
     {
        "TotalValue":0,
        "SuccessValue":0,
        "ErrorValue":0,
        "Date":"2013-10-19T00:00:00",
        "Category":"19/10/2013",
        "ToolTip":"19/10/2013"
     },
     {
        "TotalValue":0,
        "SuccessValue":0,
        "ErrorValue":0,
        "Date":"2013-10-20T00:00:00",
        "Category":"20/10/2013",
        "ToolTip":"20/10/2013"
     },
     {
        "TotalValue":0,
        "SuccessValue":0,
        "ErrorValue":0,
        "Date":"2013-10-21T00:00:00",
        "Category":"21/10/2013",
        "ToolTip":"21/10/2013"
     },
     {
        "TotalValue":1,
        "SuccessValue":0,
        "ErrorValue":1,
        "Date":"2013-10-22T00:00:00",
        "Category":"22/10/2013",
        "ToolTip":"22/10/2013"
     },
     {
        "TotalValue":68,
        "SuccessValue":68,
        "ErrorValue":0,
        "Date":"2013-10-23T00:00:00",
        "Category":"23/10/2013",
        "ToolTip":"23/10/2013"
     },
     {
        "TotalValue":96,
        "SuccessValue":96,
        "ErrorValue":0,
        "Date":"2013-10-24T00:00:00",
        "Category":"24/10/2013",
        "ToolTip":"24/10/2013"
     }
  ]

I'm using javascript to poll the server every x seconds:

$.get("/Dash/GetLineChartData", { searchDateString: searchDateForm },
            function (incomingData) {
                console.log("GetLineChartData back...", incomingData);

                // Replace the data in the pie chart with the new data
                var chart = $('#SummaryWeekImportChart').data("kendoChart");
                var currSource = chart.dataSource;
                currSource.data(incomingData.dataSource.data);
                chart.refresh();
            });

The data is loading ok but the labels across the x axis break.

Does anyone know how to update a line chart's data without messing up the labels?

Answer 1

you can add categoryAxis property inside the for the kendo chart like

categoryAxis: {
                field: "Date",
                labels: {
                    rotation: -65
                },
                majorGridLines: {
                    visible: false
                }
            },