k-chart with aggregates

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<div id="reservationGrid" class="kendo-grid"></div>
             
<div id="detail-container" ></div>
 
<script type="text/x-kendo-tmpl" id="reservationDetail">
    <div id="top-wrapper">
    <div id="table" class="reservationDetail-table">
        <table width:"300px">
            <tr>
               <td>Location: <div class="reservationDetail-property">#= Location #</div></td>
               <td>Unit: <div class="reservationDetail-property">#= Unit #</div></td>
            </tr>
    </table>
  </div>
                    
<div id="button-confirmReservation">
    <a class="k-button k-button-icontext " href="\\#"><span class="k-icon k-update">                    </span>Confirm</a>
 </div>
      </div>

      <div id="membersGrid" class="kendo-gridMembers"></div>

JavaScript

var dataSource = new kendo.data.DataSource({
    pageSize: 30,
    data: grid1,
    autoSync: true,
    schema: {
        model: {
            
            fields: {
                Location: {
                    editable: true
                },
                Unit: {
                    editable: true
                },
                Capacity: {
                    editable: true
                }
            }
        }
    }
});

var members = [{
    id: 1,
    Ime: "John",
    Priimek: "Novak",
    KrajRojstva: "London",
    DatumRojstva: new Date(1987, 4, 19)}];

var memberDataSource = new kendo.data.DataSource({
    pageSize: 30,
    data: members,
    autoSync: true,
    schema: {
        model: {
            id: "id",
            fields: {
                Ime: {
                    editable: true
                },
                Priimek: {
                    editable: true
                },
                KrajRojstva: {
                    editable: true
                },
                DatumRojstva: {
                    editable: true,
                    type: "date"
                }
            }
        }
    }
});

$("#reservationGrid").kendoGrid({
    dataSource: dataSource,
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns: [
        {
        field: "Location",
        width: 70,
        title: "Lokacija"},
    {
        field: "Unit",
        width: 70,
        title: "Enota"},
    {
        field: "Capacity",
        width: 40,
        title: "Osebe"},
    {
        command: {
            text: "Rezerviraj",
            click: showDetails
        },
        title: " ",
        width: "50px"}
    ],
    editable: true

});

wnd = $("#detail-container").kendoWindow({
    title: "Podrobnosti o rezervaciji",
    modal: true,
    visible: false,
    resizable: false,
    actions: ["close"],
    width: 750,
    height: 500
}).data("kendoWindow");



function...