Brittle charting components and crap docs

[Tim]

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>

[EZ]

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.

 

 

[Iliana Dyankova]

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

 

 

[Tim]

@EZ, thank you, your solution worked great.