Donut chart with label

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.metro.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.metro.min.css">
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<label>Percentage: <input id="value-update" style="width: 60pt;"/></label>

<div class="value-container">
    <div id="value" style="height: 200px;"></div>
    <div id="value-label" class="overlay"></div>
</div>

CSS

.overlay {
    font-size: 24px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 130px;
    left: 0;
    text-align: center;
}

JavaScript

$("#value-update").kendoNumericTextBox({
    min: 0,
    max: 100,
    decimals: 0,
    format: "n0",
    value: 63,
    change: function (e) {
        var v = this.value();
        var ds = $("#value").data("kendoChart").dataSource;
        var d = [
            { "value": v },
            { "value": 100 - v, color: "transparent" }
        ];
        ds.data(d);
    }
});

$("#value").kendoChart({
    theme: "metro",
    transitions: false,
    dataBound: function () {
        var percentage = (this.dataSource.at(0).value / 100);
        $("#value-label").text(kendo.toString(percentage, "p0"));
    },
    legend: {
        visible: false
    },
    dataSource: {
        data: [
            { "value": 100, color: "red" },
            { "value": 0, color: "blue" }
        ]
    },
    seriesDefaults: {
        type: "donut",
        holeSize: 60,
        size: 20
    },
    series: [
        { field: "value", colorField: "color" }
    ],
    tooltip: { visible: false }
});

$("#value-update").data("kendoNumericTextBox").trigger("change");