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

9 posts, 0 answers
  1. Michael
    Michael avatar
    1 posts
    Member since:
    Oct 2012

    Posted 27 Nov 2012 Link to this post

    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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 30 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Michael
    Michael avatar
    3 posts
    Member since:
    Nov 2012

    Posted 03 Dec 2012 Link to this post


    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.

  4. Michael
    Michael avatar
    3 posts
    Member since:
    Nov 2012

    Posted 05 Dec 2012 Link to this post

    .
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 06 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Michael
    Michael avatar
    3 posts
    Member since:
    Nov 2012

    Posted 07 Dec 2012 Link to this post

    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>

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 12 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Robin
    Robin avatar
    1 posts
    Member since:
    Mar 2014

    Posted 08 Dec 2014 in reply to Iliana Nikolova Link to this post

    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?
  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 11 Dec 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top