category axis on kendo chart not rendering correctly

Question

I have a Kendo Chart bound to a data model which is receiving a list of different points. The category axis is a date axis in which the maximum and minimum value are bound to the model. Always the span for the category axis is one whole year (12 months, not necessarily beginning from January). The code for the axis is as follows:

.CategoryAxis(axis => axis
                    .Labels(labels => labels.Rotation(0).Format("MMM ‘yy"))
                    .Date().Min(Model.StartDate).Max(Model.EndDate).Justify(false)

        )

The category axis renders correctly when I have more than 1 data point present in the chart, however when I have just one datapoint the category axis becomes a mess (all the labels become stacked and repeated). i was wondering if there is a way to specify a mandatory number of ticks to the axis as to always have just 12 ticks corresponding to each month. Thanks Luis.

Nitin Mall Nitin Mall · Accepted Answer · 2014-08-19T14:51:17

The only to have all the ticks is to append your data of chart with null values of missing months. So when you have got one data point you need to append other data point with null values but remaining other months. Please see below sample code:

     <div id="kk"></div>
     <script>
     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"
            }                        
        });
     </script>

Please find a JSFiddle for the same. This way when you get your JSON Data from Controller, either you can update the JSON Data at Controller Side and Append Missing Data Points with null value or else you can do it in javascript as well once you get the data in the View and before binding it with chart.

category axis on kendo chart not rendering correctly

1 Answers