Brittle charting components and crap docs

4 posts, 1 answers
  1. Tim
    Tim avatar
    3 posts
    Member since:
    Oct 2015

    Posted 20 Feb Link to this post

    Once again I find myself at the mercy of another flaky Telerik control, this time it's the chart component and the totally inadequate documentation (as usual).

    Imaging this simple configuration (or so I thought!!!)

    Why is the months axis in the wrong order despite the order clause?

    <div id="chart3"></div>
    <script>
        var data = [
            { "MonthName": "Jan", "MonthNum": 1, "Status": "Approved",  "Value": 1 },
            { "MonthName": "Jan", "MonthNum": 1, "Status": "Completed", "Value": 2 },
            { "MonthName": "Jan", "MonthNum": 1, "Status": "Requested", "Value": 1 },
            { "MonthName": "Feb", "MonthNum": 2, "Status": "Requested", "Value": 1 },
            { "MonthName": "Mar", "MonthNum": 3, "Status": "Booked",    "Value": 1 },
            { "MonthName": "Apr", "MonthNum": 4, "Status": "Completed", "Value": 1 },
            { "MonthName": "May", "MonthNum": 5, "Status": "Completed", "Value": 1 },
            { "MonthName": "Jun", "MonthNum": 6, "Status": "Completed", "Value": 1 },
            { "MonthName": "Jul", "MonthNum": 7, "Status": "Approved",  "Value": 1 },
            { "MonthName": "Aug", "MonthNum": 8, "Status": "Requested", "Value": 1 },
            { "MonthName": "Sep", "MonthNum": 9, "Status": "Requested", "Value": 1 },
            { "MonthName": "Oct", "MonthNum": 10,"Status": "Approved",  "Value": 1  },
            { "MonthName": "Nov", "MonthNum": 11,"Status": "Booked",    "Value": 1  },
            { "MonthName": "Dec", "MonthNum": 12,"Status": "Completed", "Value": 1  }
        ];

        $("#chart3").kendoChart({
            dataSource: {
                data: data,
                group: {
                    field: "Status"
                },
                sort: {
                    field: "MonthNum",
                    dir: "asc"
                }
            },
            series: [{
                type: "column",
                field: "Value",
                categoryField: "MonthNum"
            }]
        });
    </script>

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

    Posted 22 Feb Link to this post

    From my playing around with grouping, it looks like the datasource sorts by the grouped column first. That's why your months are out of order.

    One solution would be to change your MonthNum to a Date type column:

    var data = [
      { "MonthName": "Jan", "MonthNum": "1/1/2015", "Status": "Approved""Value": 1 },
      { "MonthName": "Jan", "MonthNum": "1/1/2015", "Status": "Completed", "Value": 2 },
      { "MonthName": "Jan", "MonthNum": "1/1/2015", "Status": "Requested", "Value": 1 },
      { "MonthName": "Feb", "MonthNum": "2/1/2015", "Status": "Requested", "Value": 1 },
      { "MonthName": "Mar", "MonthNum": "3/1/2015", "Status": "Booked",    "Value": 1 },
      { "MonthName": "Apr", "MonthNum": "4/1/2015", "Status": "Completed", "Value": 1 },
      { "MonthName": "May", "MonthNum": "5/1/2015", "Status": "Completed", "Value": 1 },
      { "MonthName": "Jun", "MonthNum": "6/1/2015", "Status": "Completed", "Value": 1 },
      { "MonthName": "Jul", "MonthNum": "7/1/2015", "Status": "Approved""Value": 1 },
      { "MonthName": "Aug", "MonthNum": "8/1/2015", "Status": "Requested", "Value": 1 },
      { "MonthName": "Sep", "MonthNum": "9/1/2015", "Status": "Requested", "Value": 1 },
      { "MonthName": "Oct", "MonthNum": "10/1/2015","Status": "Approved""Value": 1 },
      { "MonthName": "Nov", "MonthNum": "11/1/2015","Status": "Booked",    "Value": 1 },
      { "MonthName": "Dec", "MonthNum": "12/1/2015","Status": "Completed", "Value": 1 }
    ];
        
    $("#chart").kendoChart({
      theme: "material",
      dataSource: {
        data: data,
        group: {
          field: "Status"
        },
        schema: {
          model: {
            fields: {
              MonthNum: {
                type: "date"
              }
            }
          }
        }
      },
      series: [{
        type: "column",
        field: "Value",
        categoryField: "MonthNum",
      }],
      categoryAxis: {
        labels: {
          template: "#= dataItem.MonthName  #"
        },  
      }
    });

     

     

    DOJO

    Another option could be to transform your data and avoid grouping:

    var data2 = [
      { "MonthName": "Jan", "Approved":  1, "Completed": 2, "Requested": 1, "Booked": 0 },
      { "MonthName": "Feb", "Approved":  0, "Completed": 0, "Requested": 1, "Booked": 0 },
      { "MonthName": "Mar", "Approved":  0, "Completed": 0, "Requested": 0, "Booked": 1 },
      { "MonthName": "Apr", "Approved":  0, "Completed": 1, "Requested": 0, "Booked": 0 },
      { "MonthName": "May", "Approved":  0, "Completed": 1, "Requested": 0, "Booked": 0 },
      { "MonthName": "Jun", "Approved":  0, "Completed": 1, "Requested": 0, "Booked": 0 },
      { "MonthName": "Jul", "Approved":  1, "Completed": 0, "Requested": 0, "Booked": 0 },
      { "MonthName": "Aug", "Approved":  0, "Completed": 0, "Requested": 1, "Booked": 0 },
      { "MonthName": "Sep", "Approved":  0, "Completed": 0, "Requested": 1, "Booked": 0 },
      { "MonthName": "Oct", "Approved":  1, "Completed": 0, "Requested": 0, "Booked": 0 },
      { "MonthName": "Nov", "Approved":  0, "Completed": 0, "Requested": 0, "Booked": 1 },
      { "MonthName": "Dec", "Approved":  0, "Completed": 0, "Requested": 0, "Booked": 0 },
    ];
     
    $("#chart2").kendoChart({
      title:{ text: "No Grouping"},
      theme: "fiori",
      dataSource: data2,
      series: [{
        name: "Requested",
        type: "column",
        field: "Requested",
      },{
        name: "Approved",
        type: "column",
        field: "Approved",
      },{
        name: "Booked",
        type: "column",
        field: "Booked",
      },{
        name: "Completed",
        type: "column",
        field: "Completed",
      }],
      categoryAxis: {
            field: "MonthName "
      },
      legend:{
        visible: true,
        position: "right"
      }
    });

     

    Both options are in the same DOJO demo.

     

     

  3. Kendo UI is VS 2017 Ready
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 24 Feb Link to this post

    Hi guys,

    Another option is to sort the categories in the dataBound event. Below is a modified dojo:
    http://dojo.telerik.com/@Iliana/iBiGA

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Tim
    Tim avatar
    3 posts
    Member since:
    Oct 2015

    Posted 26 Feb in reply to EZ Link to this post

    @EZ, thank you, your solution worked great.
Back to Top
Kendo UI is VS 2017 Ready