Kendo Playground

by ducka

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="chart"></div>

JavaScript

$("#chart").kendoChart({
    dataSource: {
        data: [
            { StaffFullName: "Joe Bloggs", Sales: 999999.00, SalesPercent: 99 },
            { StaffFullName: "Joe Bloggs 2", Sales: 1234.00, SalesPercent: 99 },
            { StaffFullName: "Joe Bloggs 3", Sales: 123.00, SalesPercent: 99 },
            { StaffFullName: "Joe Bloggs 4", Sales: 587788.00, SalesPercent: 99 },
            { StaffFullName: "Joe Bloggs 5", Sales: 899232.00, SalesPercent: 99 },
            { StaffFullName: "Joe Bloggs 6", Sales: 983.00, SalesPercent: 99 },
            { StaffFullName: "Joe Bloggs 7", Sales: 9833.00, SalesPercent: 99 },
            { StaffFullName: "Joe Bloggs 8", Sales: 12384.00, SalesPercent: 99 }
        ],
        sort: {
            field: "Sales",
            dir: "desc"
        }
    },
    legend: {
        visible: false
    },
    series: [{
        field: "Sales", 
        name: "Sales Amount", 
    }],
    seriesDefaults: {
        type: "bar",
        gap: 0.5,
        labels: {
            visible: true,
            position: "above",
            template: "#:value# (%00) #debugger;#"
        }
    },
    categoryAxis: {
        field: "StaffFullName",
        line: { visible: false },
        majorGridLines: { visible: false }
    },
    valueAxis: {
        line: { visible: false },
        majorGridLines: { visible: false },
        labels: { visible: false }
    },
});