KendoUI chart aggregate example

Answer for https://stackoverflow.com/questions/51189468/group-and-stack-data-in-kendo-ui-chart

by Nimeshka Srimal

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
<div id="chart"></div>

JavaScript

var data = [
   
    {"Year":2011,"Expense":1},
    {"Year":2011,"Expense":5},
    {"Year":2011,"Expense":9},
    
    {"Year":2012,"Expense":2},
    {"Year":2012,"Expense":6},
    {"Year":2012,"Expense":10},
    
    {"Year":2013,"Expense":3},
    {"Year":2013,"Expense":7},
    {"Year":2013,"Expense":11},
    
    {"Year":2014,"Expense":4},
		{"Year":2014,"Expense":8},
    {"Year":2014,"Expense":12},
    
];
/*
var data = [
    { Name: 'PAVI', value: 3 },
    { Name: 'Crystal', value: 2 },
    { Name: 'PAVI', value: 3 },
    { Name: 'Crystal', value: 10 }
];
*/

$(document).ready(function() {
    $("#chart").kendoChart({
        theme: "silver",
        title: {
            text: "Total records processed"
        },
        legend: {
            position: "bottom"
        },
        dataSource: {
            data: data,
            group: [{ field: "Expense"}],
            /*sort: { field: "Year", dir: "asc" }*/
        },
        transitions: false,
        series: [{
            type: "bar",
            stack: "true",
            field: "Expense"
        }],
        categoryAxis: {
            field: "Year"                                
        },
				tooltip: {
          visible: true,
          template: "#= value #"
        }
    });
});