Preventing auto-aggregation with "date" category axis

4 posts, 1 answers
  1. Scott
    Scott avatar
    2 posts
    Member since:
    Jul 2013

    Posted 17 Jul 2013 Link to this post

    I'm evaluating the Kendo DataViz charts for my company and we are very interested in the line chart. I think I am encountering something that may not be supported and was hoping someone could tell me if it is possible to turn off the automatic aggregation when using categoryAxis type="date" ?

    In the attached image, you will see two line charts that use the exact same data source. I need to show all of the data points, and keep the category axis showing the dates. I'm thinking that type="date" is causing the auto-aggregation, but don't know another way to display the same desired chart. We do not plan on using the other features offered by type="date" and after binding the data it will be a static chart with no interaction by the user.

    Any advice is appreciated. Thank you.
  2. Answer
    Iain
    Iain avatar
    2 posts
    Member since:
    Apr 2012

    Posted 17 Jul 2013 Link to this post

    Hi,

    I've just been trying to get something similar working myself this evening. From what I can gather it does just aggregate data points around the BaseUnit selected and I haven't found a way to turn that off. Have been able to get it working reasonably well though with a combination of setting BaseUnit, BaseUnitStep, and the Label Step - it's a slightly different scenario but I think the principles might be the same for you. 

    In my scenario we're looking at a day worth of stock price data - from 7am to 8pm - updated at variable intervals which could be as often as every 15 seconds. When setting the BaseUnit to Hours I was just getting one chart point in the hour which was an aggregate sum of all data points falling in that hour - similar to your example. I wanted to keep an axis just showing hourly intervals (07:00  08:00  09:00 etc) but to see about 10 data points per hour.

    For me this worked :-

    • Set BaseUnit to 'Minutes'
    • Set BaseUnitStep to 10 to give me a data point every 10 minutes.
    • Set Label Step to 12 which gave me a label every two hours. Setting to 6 gives a label per hour.
    • Set Min & Max to ensure it always showed a full day and that the date axis was exactly on the hour even if my data points started at 7:01 for example.
    .CategoryAxis(axis =>
    {
        axis.Categories(model => model.Date);
        axis.Axis.BaseUnit = ChartAxisBaseUnit.Minutes;
        axis.Axis.BaseUnitStep = 10;
        axis.Labels(label => label.Step(12));
        axis.Axis.Min = DateTime.Parse( "2013-06-28 07:00:00" );
        axis.Axis.Max = DateTime.Parse( "2013-06-28 20:00:00" );
        axis.Axis.MajorGridLines.Visible = false;
    })
    The one thing I couldn't get working was the major grid lines. I couldn't find a way to make these appear on the same step frequency as the labels. They seem tied to the BaseUnit itself which is a pain as they become too close together very quickly. Could be wrong on that but for now I've just had to turn them off.

    The other way to do it is by setting BaseUnit to 'Fit' and setting the MaxDateGroups to the max number of chart points you want. This worked for me too but was a bit more awkward to work out. Obviously there's still a certain amount of aggregation here but that's what I wanted. Depending on the frequency and regularity of your dataset if you set these intervals carefully you should be able ensure you get all the data points displayed.

    Hope this might at least be some help. I'm new to DataViz also so there may well be a better way!

    Regards
    Iain
  3. Scott
    Scott avatar
    2 posts
    Member since:
    Jul 2013

    Posted 18 Jul 2013 Link to this post

    Iain,

    Many thanks. Your recommendations led me straight to the answer, and the attached image shows the UI Designer's "desired" chart and my implemented "actual" chart side-by-side. I had to use baseUnit of "minutes" and baseUnitStep of 1 so my labels would show to the minute level. 

                        categoryAxis: {
                            baseUnit: "minutes",
                            labels: {
                                step: 24*60,
                                dateFormats: {
                                    minutes: "M/d"
                                }
                            },
                            majorGridLines: {
                                visible: false
                            },
                            majorTicks: {
                                visible: false
                            },
                            min: minChartDate,
                            max: maxChartDate,
                        }

    Thanks for your help,
    Scott
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2813 posts

    Posted 19 Jul 2013 Link to this post

    Hello,

    Specifying type: "category" is usually enough to revert the axis back to the default behavior (one slot per category):
         categoryAxis: {
            type: "category"
         }

    Demo: http://jsbin.com/ovukaw/1/edit

    That said, I think we've missed the overload to do this in the MVC wrappers. We'll fix this right away.

    I hope this helps. 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