Kendo UI line chart sort order
I can't work out how to get the categories ordering correctly on the
x-axis in a kendo UI line chart. Here's my example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="chart"></div>
<script src="js/thirdParty/jquery.js"></script>
<script src="js/thirdParty/kendo.all.min.js"></script>
<script>
$(function () {
var data,
dataSource;
data = [{
type: "C1",
amount: 100,
year: 2008
}, {
type: "C2",
amount: 120,
year: 2008
}, {
type: "C2",
amount: 50,
year: 2009
}, {
type: "C1",
amount: 10,
year: 2010
}, {
type: "C1",
amount: 120,
year: 2011
}, {
type: "C2",
amount: 50,
year: 2011
}];
dataSource = new kendo.data.DataSource({
data: data,
group: {field: "type"},
sort: { field: "year" }
});
$("#chart").kendoChart({
dataSource: dataSource,
series: [{
type: "line",
field: "amount",
categoryField: "year",
name: "#= group.value #"
}],
})
});
</script>
</body>
</html>
and here's a screen shot of what the output looks like:
As you can see the years are ordered incorrectly even though the data is
in year order and I've specified to sort on year in the kendo data source.
Any help would be appreciated.
No comments:
Post a Comment