This is a migrated thread and some comments may be shown as answers.

Brittle charting components and crap docs

3 Answers 15 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Tim
Top achievements
Rank 1
Tim asked on 20 Feb 2016, 09:25 AM

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>

3 Answers, 1 is accepted

Sort by
0
Accepted
EZ
Top achievements
Rank 2
answered on 22 Feb 2016, 03:02 PM

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.

 

 

0
Iliana Nikolova
Telerik team
answered on 24 Feb 2016, 08:40 AM
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!
 
0
Tim
Top achievements
Rank 1
answered on 26 Feb 2016, 03:34 PM
@EZ, thank you, your solution worked great.
Tags
Charts
Asked by
Tim
Top achievements
Rank 1
Answers by
EZ
Top achievements
Rank 2
Iliana Nikolova
Telerik team
Tim
Top achievements
Rank 1
Share this question
or