Kendo UI

jQuery + Kendo UI + MockJax

by chanaka1

HTML

<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<script src="https://getfirebug.com/firebug-lite.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<div id="container">
<div id="chart" width="400"></div>
</div>

CSS

#container {
    width: 800px
}

JavaScript

var series = [ { department: "Home", sales: 200 }, 
               { department: "Sporting Goods", sales: 450 }, 
               { department: "Infant And Baby Clothing And Accessories", sales: 300 }, 
               { department: "Auto", sales: 125 } ];

$("#chart").kendoChart({
    title: {
        text: "Kendo Chart Example"
    },
    dataSource: {
        data: series
    },
    series: [{
        type: "pie",
        field: "sales",
        categoryField: "department"
    }],
    tooltip: {
        visible: true,
        template: "<div style='white-space: normal; max-width: 120px;'>${ category } - ${ value }</div>"
    }
});