Kendo Area Chart showing incorrect chart

4 posts, 0 answers
  1. parag
    parag avatar
    3 posts
    Member since:
    Apr 2016

    Posted 20 Apr Link to this post

    Hi, 

    I am using kendo chart to visualize some data. 

    The data looks like below: 

        

    my Kendo Code/chart code looks like below:

    {
       "timestamp": 1454664601000,
       "strategyId": 14,
       "count": 6
     }

    And here is the Kendo Javascript code to render the chart. 

    var messageRateData = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "content/shared/message-rate-details.json",
                            dataType: "json"
                        }
                    },
                    sort: {
            field: "timestamp",
            dir: "asc"
            },
            group: {
                        field: "strategyId"
                    }
                });
     
    $("#chart10").kendoChart({
                dataSource: messageRateData,
                title: {
                    text: "Message Rate Details in 10 min interval"
                },
                legend: {
                    position: "top"
                },
        series: [{
                            type: "area",
                stack: true,
                field: "count",
                name: "StrategyId #= group.value #"
                        }],
        valueAxis: {
                    labels: {
                        format: "{0}"
                    },
                    line: {
                        visible: false
                    }
                },
         categoryAxis: {
                    field: "timestamp",
            type: "date",
            labels: {
                        format: "hh:mm:ss"
                        }
                },
                tooltip: {
                    visible: true,
                    format: "{0}"
        }
    });

    However to my utter surprise I find that the data points is not displayed correctly for the first data-point. i.e. "03:00:01" for the given StrategyId.

    Please find the screen shots below. Here the data and the plot is attached in the pic. the data point at timestamp : 1454664605000 (i.e. 03:00:05) should render two bars/areas (for strategyId 14 and 16), however it seems to be shifted to earlier time. 

    Ideally for timestamp :03:00:05, I should see two plots/bars for StrategyId 14 and StrategyId 16, however It seems to be shifted to earlier time viz "03:00:01 and 03:00:02 .

     

     

    Any help/corrections/work around would be greatly appreciated. 

  2. EZ
    EZ avatar
    60 posts
    Member since:
    May 2015

    Posted 20 Apr in reply to parag Link to this post

    Does it help if you tell the dataSource via schema that the timestamp field is a date?

     

    var messageRateData = new kendo.data.DataSource({
        transport: {
            read: {
                url: "content/shared/message-rate-details.json",
                dataType: "json"
            }
        },
        sort: {
            field: "timestamp",
            dir: "asc"
        },
        group: {
            field: "strategyId"
        },
        schema: {
            model: {
                fields: {
                    Timestamp: {
                        type: "date"
                    }
                }
            }
        }
    });
  3. Kendo UI is VS 2017 Ready
  4. parag
    parag avatar
    3 posts
    Member since:
    Apr 2016

    Posted 21 Apr in reply to EZ Link to this post

    Nope it did not help. Still the same results. 
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 22 Apr Link to this post

    Hi Parag,

    I believe the issue is caused by there is a different number of points in each of the groups. In this case you should use series.categoryField instead of categoryAxis.field. For more details check the corresponding documentation:

    http://docs.telerik.com/kendo-ui/controls/charts/data-binding#bind-to-grouped-data

    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
Kendo UI is VS 2017 Ready