Dynamic Kendo Chart

by Checha Man

HTML

<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<body>
    <div>
        <button id="groupByTest">Group by Test</button>
        <button id="groupByStudent">Group by Student</button>
        <button id="sortByCategory">Sort by Category</button>
        <button id="sortByScore">Sort by Score</button>
    </div>
	<div id="chart"/>
	<div id="chartTable"/>
</body>

JavaScript

var jsonData = [
	{"Student":"student 1","Test":"test A","Value":29,"CustomOrder":3},
	{"Student":"student 1","Test":"test B","Value":58,"CustomOrder":3},
	{"Student":"student 2","Test":"test A","Value":33,"CustomOrder":4},
	{"Student":"student 2","Test":"test B","Value":41,"CustomOrder":4},
	{"Student":"student 3","Test":"test A","Value":29,"CustomOrder":2},
	{"Student":"student 3","Test":"test B","Value":62,"CustomOrder":2},
	{"Student":"student 4","Test":"test A","Value":62,"CustomOrder":1},
	{"Student":"student 4","Test":"test B","Value":72,"CustomOrder":1},
	{"Student":"student 5","Test":"test A","Value":33,"CustomOrder":5},
	{"Student":"student 5","Test":"test B","Value":25,"CustomOrder":5}
];

var myDataSource = new kendo.data.DataSource({
    data: jsonData,
    group: [{ "field": "Student"}],
    sort: [
        { "field": "Test", "dir": "asc" },
        { "field": "CustomOrder", "dir": "asc" }
    ],
    schema: {
        model: {
            fields: {
                Student: {
                    "type": "string"
                },
                Test: {
                    "type": "string"
                },
                Value: {
                    "type": "number"
                },
                CustomOrder: {
                    "type": "number"
                }
            }
        }
    }
});
var group = "Student";
var category = "Test";
var sort = "Student";

function updateChart(){
    var chart = $("#chart").data("kendoChart");
    chart.options.title = "group by " + group + ", sort by " + sort;    
    chart.options.categoryAxis.field = category;    
}

function groupByTest_click() {    
    group = "Test";
    category = "Student";
    updateChart();
    $('#chart').data('kendoChart').dataSource.group([{ field: group }]);
    $('#chart').data('kendoChart').dataSource.sort([{ field: sort, dir: "desc" }]);    
}

function groupByStudent_click() {
    group = "Student";
    category = "Test";
    updateChart();
   ...