Series Data lines up with categories

4 posts, 0 answers
  1. Kieren
    Kieren avatar
    6 posts
    Member since:
    Jun 2013

    Posted 06 Jul 2013 Link to this post

    Hi

    My fundamental understanding was that series data should line up with categories. This chart renders to that logic:
    function createChart() {
                   $("#chart").kendoChart({
                       title: {
                           text: "Units sold"
                       },
                       seriesDefaults: {
                           width: 2,
                           markers: {
                               visible: false,
                           },
                           overlay: {
                               gradient: null
                           }
                       },
                       series: [{
                           type: "area",
                           transitions: false,
                           width: 2,
                           data: [
                               150, 200, 50
                           ]
                       }],
                       valueAxis: {
                           labels: {
                               visible: true
                           },
                           line: {
                               visible: false
                           }
                       },
                       categoryAxis: {
                           categories: [
                               new Date("2012/02/01 00:00:00"),
                               new Date("2012/02/10 00:00:00"),
                               new Date("2012/02/20 00:00:00")
                           ],
                           baseUnitStep: "auto",
                           autoBaseUnitSteps: {
                               days: [1]
                           }
                       }
                   });
     
               }
    But:
    The dates aren't aligned to series?

    And, if you change this date:
    new Date("2012/02/10 00:00:00") TO new Date("2012/02/02 00:00:00"),

    The chart renders 200 as the value for 2012/02/01?

    Just wondering if I could get a bit of an explanation for what I'm seeing.

    Thanks
    Kieren
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 08 Jul 2013 Link to this post

    Hello,

    Please try with the below code snippet.

    function createChart() {
                   $("#chart").kendoChart({
                       title: {
                           text: "Units sold"
                       },
                       seriesDefaults: {
                           width: 2,
                           markers: {
                               visible: false,
                           },
                           overlay: {
                               gradient: null
                           }
                       },
                       series: [{
                           type: "area",
                           transitions: false,
                           width: 2,
                           data: [
                               150, 200, 50
                           ]
                       }],
                       valueAxis: {
                           labels: {
                               visible: true
                           },
                           line: {
                               visible: false
                           }
                       },
                       categoryAxis: {
                           categories: [
                               new Date("2012/02/01 00:00:00"),
                               new Date("2012/02/02 00:00:00"),
                               new Date("2012/02/20 00:00:00")
                           ],
                           baseUnit: "days",
                           autoBaseUnitSteps: {
                               days: [1]
                           }
                       }
                   });
               }

    baseUnit: "days"

    Please check below demo for more info.
    http://demos.kendoui.com/dataviz/area-charts/date-axis.html

    Thanks.
    Jayesh Goyani
  3. Jayesh Goyani
    Jayesh Goyani avatar
    2733 posts
    Member since:
    May 2010

    Posted 08 Jul 2013 Link to this post

    Hello,

    Please changed baseUnitStep: "auto" code with baseUnit: "days".

    Please check below demo for more info.
    http://demos.kendoui.com/dataviz/area-charts/date-axis.html

    Thanks.
    Jayesh Goyani
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 Jul 2013 Link to this post

    Hi,

    @Kieren
    The illustrated outcome is caused by baseUnitStep: "auto". As an explanation:
    • When using this configuration the step will be automatically calculated depending on the data;
    • By design when used date axis the data is aggregated for a particular period.
    In your particular example the baseUnit is two days and the aggregated data show 200 for the first period. I hope this information helps.

    @Jayesh 
    I am not quite sure if I understand what your question is. Could you please elaborate a bit more - probably I am missing something. Thank you in advance for your cooperation.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top