How to ensure xAxis ticks are on the first of every month?

[Michael]

I'm graphing some data with dates on the x axis. The time span may be anywhere from 3 to 30 months, and I want to always have a tick and a label on the first of each month.  How can I control where the labels appear?

I'm using a scatter plot, because I need to accurately show the date of each mark, and the category chart doesn't seem to allow for that.  The xField values are Javascript dates.

ALSO..... the last full tick is getting forced to the right-hand side, sometimes out of order.  In the attached screenshot, when I set the xAxis.max to Nov 30, the xAxis mark for Nov 1 appears further to the right than data in late November.  If I set the max to Dec 1, this is not a problem.  What's the best way to resolve this?


Kendo DataViz version 2012.3.801

[Iliana Dyankova]

Hello Michael,

I am not quite sure if I understand your scenario correctly. Could you please elaborate a bit more on the exact functionality you are trying to implement? This way I would be able to advice you further and suggest the most appropriated solution (if such is possible).Thank you in advance for your cooperation.
 
Regards,
Iliana Nikolova
the Telerik team

[Michael]

Sure.  Here's my situation. I first construct a basic, incomplete specification for the chart.

var    chartSpec = {
        dataSource: {
            transport: {
                read: {
                    url: null,
                    dataType: "json"
                }
            },
                            
            schema: {
                data: "Inspections",
                model: {
                    fields: {
                        InspectionId: { type: "number" },
                        InspectionDate: { type: "date" },
                        Score: { type: "number" }
                    }
                }
            }
        },
        seriesDefaults: {
            type: "scatter",
         },
        series:
        [{
            xField: "InspectionDate",
            yField: "Score"
        }],
        xAxis: {
            title: {
                text: "Inspection Date"
            },
            labels: {
                rotation: -60,
                template: '#= kendo.toString(value, "dd MMM yyyy") #'
            }
        }
    }


Then I fill in information that is only available at runtime:
    
    chartSpec.dataSource.transport.read.url = controller.getUrl();
    chartSpec.xAxis.min = controller.getMinDate();
    chartSpec.xAxis.max = controller.getMaxDate();

Then I make the chart:

    $('#chart').kendoChart(chartSpec);

    
    
There are two problems:

1.    Depending on the min and max values for the x axis, I may get many or few date labels. I want to have a label for every month in the range.  See attached image, showing the x axis for three different choices of date range.

2.  For some date ranges, the sparse labels are not in proper numerical relationship to the data points.  For instance, the single data point visible in the screenshots has InspectionDate = 8 Nov 2012 and Score = 0.  In the first and third screenshots, it correctly appears after the label for 1 Nov 2012 or before the label for 1 Jan 2013.  But in the middle screenshot, the data point appears before the label for 1 Jan 2012. It looks like the automatic choice to generate only a few labels, together with the desire to put a label at the right hand edge, has led to poor placement of the labels.

[Michael]

.

[Iliana Dyankova]

Hello Michael,

Thank you for the detailed information.

Straight to the questions:

1. Generally speaking you could adjust the granularity of the labels on the date axis via the baseUnit property. Hence in order to get the labels for the year you should set a smaller time interval;
2. I am not quite sure what causes this problem. In order to assist you best and provide concrete recommendations I would like to ask you to send a runnable project that illustrates your current implementation and which we can test locally. Thank you in advance for your cooperation.

 
Regards,
Iliana Nikolova
the Telerik team

[Michael]

Thanks for the baseUnit info. I seem to be having some performance issues with it, but will continue to investigate.

I'm including below a live example that shows the problem with dates coming out of order.  The file needs jquery.min.js and kendo.all.min.js in the same directory to run.  This is the version:

/*

* Kendo UI Complete v2012.3.801 (http://kendoui.com)

* Copyright 2012 Telerik AD. All rights reserved.

The problem can be turned on and off by commenting and uncommenting the lines to set the max:

$(function() {

    var chartSpec = GetInitialChartSpec();

    chartSpec.xAxis.majorUnit = 1;

    chartSpec.xAxis.min = new Date(2012, 6, 1);

 

    // this leads to data points out of order with xAxis ticks

    chartSpec.xAxis.max = new Date(2012, 11, 30);   

 

 

    // this leads to correct placement of ticks

    //chartSpec.xAxis.max = new Date(2012, 12, 1);  

 

    $('#chart').kendoChart(chartSpec);

})

The attached image shows the appearance when the end date is set to Nov 30, 2012. You can see that points with an InspectionDate in November appear between the Oct 1 and Nov 1 ticks on the x axis.  When the max for the xAxis is changes to Dec 1, then the data points seem to be aligned correctly with the ticks on the xAxis.

Your formatter is omitting some spaces in the HTML file, so I'm including it without using the code formatter.

------------------------------------- begin html file ----------------------------------------

<!DOCTYPE html>
<html>
    <head>
        <title>Kendo DataViz Sample</title>
        <script src="jquery.min.js"></script>
        <script src="kendo.all.min.js"></script>
        <script>
            $(function() {
                var chartSpec = GetInitialChartSpec();
                chartSpec.xAxis.majorUnit = 1;
                chartSpec.xAxis.min = new Date(2012, 6, 1);

                // this leads to data points out of order with xAxis ticks
                chartSpec.xAxis.max = new Date(2012, 11, 30);    


                // this leads to correct placement of ticks
                //chartSpec.xAxis.max = new Date(2012, 12, 1);   

                $('#chart').kendoChart(chartSpec);
            })

            function GetInitialChartSpec() {

                var JsonData = '{"UnitId":2324,"UnitName":"Mike\'s First Unit","TemplateName":"Basic Template 1","OrganizationId":1008,"TemplateId":1396,"StartDateInt":20120101,"EndDateInt":20121207,"Inspections":[{"InspectionId":14207,"OrganizationId":1008,"UnitId":2272,"UnitPermanentId":2261,"TemplateId":1396,"InspectionDate":"\/Date(1352268000000)\/","InspectionInt":20121107,"InspectionScore":0},{"InspectionId":14199,"OrganizationId":1008,"UnitId":2261,"UnitPermanentId":2261,"TemplateId":1396,"InspectionDate":"\/Date(1352354400000)\/","InspectionInt":20121108,"InspectionScore":1},{"InspectionId":14200,"OrganizationId":1008,"UnitId":2261,"UnitPermanentId":2261,"TemplateId":1396,"InspectionDate":"\/Date(1353045600000)\/","InspectionInt":20121116,"InspectionScore":8},{"InspectionId":14214,"OrganizationId":1008,"UnitId":2324,"UnitPermanentId":2261,"TemplateId":1396,"InspectionDate":"\/Date(1354255200000)\/","InspectionInt":20121130,"InspectionScore":14},{"InspectionId":14424,"OrganizationId":1008,"UnitId":2324,"UnitPermanentId":2261,"TemplateId":1396,"InspectionDate":"\/Date(1354773600000)\/","InspectionInt":20121206,"InspectionScore":6}]}';

                var chartSpec = {
                        theme: $(document).data("kendoSkin") || "default",
                        dataSource: {
                            data : JSON.parse(JsonData),
                            requestEnd: function (e) {
                                if (e && e.response && e.response.Inspections && e.response.Inspections.length === 0) {
                                    setTimeout(function() {$('<div class="custom-overlay" id="nodata"><p class="message">No data available</p></div>').appendTo("#graph"); }, 0);
                                }
                            },
                            
                            schema: {
                                data: "Inspections",
                                model: {
                                    fields: {
                                        InspectionId: { type: "number" },
                                        OrganizationId: { type: "number" },
                                        UnitId: { type: "number" },
                                        UnitPermanentId: { type: "number" },
                                        TemplateId: { type: "number" },
                                        InspectionDate: { type: "date" },
                                        InspectionInt: { type: "number" },
                                        InspectionScore: { type: "number" }
                                    }
                                }
                            },
                            sort: {
                                field: "InspectionDate",
                                dir: "asc"
                            }
                        },
                        title: {
                            text: ''
                        },
                        seriesDefaults: {
                            type: "scatter"
                        },
                        series:
                        [{
                            xField: "InspectionDate",
                            yField: "InspectionScore"
                        }
                        ],
                        xAxis: {
                            title: {
                                text: "Inspection Date"
                            },
                            baseUnit: "months",
                            majorGridLines : {
                                visible: true
                            },            
                            labels: {
                                rotation: -60,
                                template: '#= kendo.toString(value, "dd MMM yyyy") #'
                            }
                        },
                        yAxis: {
                            title: {
                                text: "Inspection Score"
                            },
                            labels: {
                                format: "N0"
                            },
                            majorUnit : 5,
                        },
                        tooltip: {
                            visible: true,
                            template: '#= kendo.toString(value.x, "MM/dd/yyyy") # <br /> Score #=dataItem.InspectionScore#'
                        }
                    };

                    return chartSpec;

                }

            </script>
        </head>
        <body>
            <h2>Kendo DataViz Sample</h2>
            <div id="chart"></div>
        </body>
</html>

[Iliana Dyankova]

Hi Michael,

Thank you for the example. It seems that you found a bug in the current version of Kendo UI - I forwarded the problem to the developers and they will do their best to provide a fix for it as soon as possible. Please excuse us for the inconvenience caused. 

On a side note, as a small sign of our appreciation for this finding I updated your points.

Regards,
Iliana Nikolova
the Telerik team

[Robin]

This is still an issue in version 2014 Q3 with Michaels test case above failing.

Is this in your bug tracker? Any plans of working on it?

[T. Tsonev]

Hello,

We plan on fixing this, but there's no ETA for the moment.
Hopefully we'll be able to fix it in time for the service pack release in January.

Apologies for the caused inconvenience.

Regards,
T. Tsonev
Telerik