Strange behaviour in category assignment/grouping for charts, bug?

4 posts, 1 answers
  1. Tom
    Tom avatar
    2 posts
    Member since:
    Apr 2016

    Posted 12 Apr Link to this post

    I am encountering some very strange behaviour when trying to produce a chart with stacked bars:

    var mock_data = [
                    { "Field1": "Type A", "Field2": "1", "Cost": 123 },
                    { "Field1": "Type A", "Field2": "2", "Cost": 234 },
                    { "Field1": "Type A", "Field2": "3", "Cost": 345 },
                    { "Field1": "Type A", "Field2": "4", "Cost": 456 },
                    { "Field1": "Type A", "Field2": "5", "Cost": 567 },
                    { "Field1": "Type B", "Field2": "1", "Cost": 765 },
                    { "Field1": "Type B", "Field2": "2", "Cost": 654 },
                    { "Field1": "Type B", "Field2": "3", "Cost": 543 },
                    { "Field1": "Type B", "Field2": "4", "Cost": 432 },
                    { "Field1": "Type B", "Field2": "5", "Cost": 321 },
                    { "Field1": "Type C", "Field2": "1", "Cost": 100 },
                    { "Field1": "Type C", "Field2": "2", "Cost": 150 },
                    { "Field1": "Type C", "Field2": "3", "Cost": 200 },
                    { "Field1": "Type C", "Field2": "4", "Cost": 250 },
                    { "Field1": "Type C", "Field2": "5", "Cost": 300 },
        ];

    $("#chart2").empty();
    $("#chart2").kendoChart({
        dataSource: {
            data: mock_data,
            group: {
                field: "Field1"
            }
        },
        series: [{
            type: "column",
            field: "Cost",
            stack: true,
        }],
        valueAxis: [{
            name: "cost",
            title: {
                text: "Cost (£)"
            }
        }],
        categoryAxis: {
            field: "Field2",
            label: "Field 2 Label",
            dir: "asc"
        },
        dataBound: function (e) {
            var axis = e.sender.options.categoryAxis;
            axis.categories = axis.categories.sort()
        }
    });

    I am finding that the ordering of the data is strongly influencing how the grouping is performed, but more often than not elements of the data are finding their way into the wrong category.With the data ordered as shown above, I find that the category 2 entry for Type A is shifted into category 5, and the entries for Type A are subsequently each shifted along one category. I cannot seem to find a way to order the data when it is supplied that produces the correct result.

    Is there some particular way the data needs to be sorted in order for this to assign the correct categories?

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

    Posted 12 Apr in reply to Tom Link to this post

    Seems to work if you add the sorting directly to the datasource:

    $("#chart").kendoChart({
        dataSource: {
           data: mock_data,
           group: {
              field: "Field1"
           },
           sort: {
             field: "Field2",
             dir: "asc"
           },
       },
       series: [{
           type: "column",
           field: "Cost",
           stack: true,
       }],
       valueAxis: [{
           name: "cost",
           title: {
               text: "Cost (£)"
           }
       }],
       categoryAxis: {
           field: "Field2",
           label: "Field 2 Label",
           dir: "asc"
       },
     });

  3. Kendo UI is VS 2017 Ready
  4. Tom
    Tom avatar
    2 posts
    Member since:
    Apr 2016

    Posted 13 Apr in reply to EZ Link to this post

    This does seem to be a working fix, and prevents the need for the sorting function I added on databound. I still find it a very odd thing to happen, but I will mark this as answered.
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 14 Apr Link to this post

    Hello,

    The points will be in wrong category because of using the categoryAxis field option and sorting the categories. If the categoryAxis field option is used then the points will be matched to a category based on the index because you are specifying a field from which the categories should be retrieved and not a category for a specific point from the data. You can use the series categoryField option instead of categoryAxis.field to avoid the problem with the original setup. 

    Regards,
    Daniel
    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