Force date Axis in Kendo Dataviz to have all values

Question

I'm making a chart using Kendo and have run into a problem.

I'm getting a load of data and passing it into the chart, the data has a date and a value, and my js looks like this:

chart.kendoChart({
                 title: {
                     text: "title"
                 },
                 seriesDefaults: {
                     type: "line"
                 },
                 dataSource: {
                     data: []
                 },
                 series: [{
                     name: "Value",
                     field: "value"
                 }]
                 categoryAxis: [{
                     type: "date",
                     field: "date",
                     baseUnit: "months",
                     min: "2013-07-22T00:00:00",
                     max: "2014-07-22T00:00:00"
                 }]
             });

The problem is that if there is no Data returned (i.e. an empty array as above) I'd still like to see the Month date labels along the bottom, but there is nothing there (there are still default value labels up the y-axis).

I have looked at the Kendo documentation and cannot find anything there, nor any similar questions on stackoverflow. Can anyone help? Let me know in comments if there is anything I need to clarify/provide. Thanks.

Usually charts will fill in for null values. They may not show a line or show a bar but the axis labels will appear. Is it possible to fill your empty array with nulls? — Ross Bush

Nitin Mall Nitin Mall · Accepted Answer · 2014-08-28T13:37:22

Filling your data with null values for months which have no data can resolve your issue.

Please see this Fiddle as an example:

Also see the sample code below:

var _data=[{"weight":200,"createddate":"1/1/2014"},
       {"weight":200,"createddate":"2/1/2014"},
       {"weight":200,"createddate":"3/1/2014"},
       {"weight":149.91,"createddate":"4/1/2014"},
       {"weight":null,"createddate":"5/1/2014"},
       {"weight":null,"createddate":"6/1/2014"},
      {"weight":null,"createddate":"7/1/2014"},
      {"weight":null,"createddate":"8/1/2014"},
      {"weight":null,"createddate":"9/1/2014"},
      {"weight":null,"createddate":"10/1/2014"},
      {"weight":null,"createddate":"11/1/2014"},
      {"weight":null,"createddate":"12/1/2014"}]

        $("#kk").kendoChart({
            dataSource: {
                data:_data
            },
            seriesColors: ["Red"],                
            seriesDefaults: {
                type: "column",
            },
            series: [{
                name: "weight",
                field: "weight",
                categoryField: "createddate",
            }],
            categoryAxis: {
                type: "date",
                baseUnit: "months"
            }                        
        });

Force date Axis in Kendo Dataviz to have all values

1 Answers