Kendo Grid and Chart

by Vojtech Mares

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
  <button type="button"id="btnclick"  >Click me</button>
<div id="grid"></div>
<div id="chart"></div>

JavaScript

var sharedDataSource = new kendo.data.DataSource({
    type     : "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema   : {
        model: {
            fields: {
                OrderDate: { type: "date" }
            }
        }
    }  
});

function ShowGrid() {
var grid = $("#grid").kendoGrid({
    dataSource:sharedDataSource ,
    autoBind: true,
    pageable  : {
        pageSize : 10,
        refresh  : true,
        pageSizes: [10, 20]
    },
    columns   : [
        {
            field     : "OrderID",
            filterable: false
        },
        "Freight",
        {
            field : "OrderDate",
            title : "Order Date",
            width : 100,
            format: "{0:MM/dd/yyyy}"
        },
        {
            field: "ShipName",
            title: "Ship Name",
            width: 200
        },
        {
            field: "ShipCity",
            title: "Ship City"
        }
    ]

}).data("kendoGrid");
}

$('#btnclick').click(function () {
ShowGrid();
});

$("#chart").kendoChart({
    dataSource  : sharedDataSource,
   autoBind: true,
    categoryAxis: {
        field: "OrderID"
    },
    legend      : {
        position: "right", visible: true
    },

    seriesDefaults: { type: "line" },
    series        : [
        { field: "OrderDate", name: "OrderDate" },
        { field: "Freight", name: "Freight" },
        { field: "ShipVia", name: "ShipVia" }
    ],
    valueAxis     : [
        {
            name   : "OrderID",
            max    : 5.0,
            min    : 0,
            labels : {
                format: "{0}"
            },
            tooltip: { visible: true }
        }
    ],
    navigator     : {
        series: [
            { field: "OrderDate", name: "OrderDate" },
            { field: "Freight", name: "Freight" },
            { field: "ShipVia", name: "ShipVia" }
        ]
    }
});