Kendo UI

jQuery + Kendo UI + MockJax + Knockout

by jbristowe

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"></script>
<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://cdnjs.cloudflare.com/ajax/libs/knockout/1.2.1/knockout-min.js"></script>
<div class="chart-wrapper">
    <div id="chart"></div>
</div>

JavaScript

function createChart() {
    $("#chart").kendoChart({
        theme: $(document).data("kendoSkin") || "default",
        title: {
            text: "Internet Users"
        },
        legend: {
            position: "bottom"
        },
        chartArea: {
            background: ""
        },
        seriesDefaults: {
            type: "line",
            markers: {
                size: 0
            }
        },
        series: [{
            name: "World",
            data: [15.7, 16.7, 20, 23.5, 26.6]
        }, {
            name: "United States",
            data: [67.96, 68.93, 75, 74, 78]
        }],
        valueAxis: {
            labels: {
                format: "{0}%"
            }
        },
        categoryAxis: {
            categories: [2005, 2006, 2007, 2008, 2009]
        },
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    });
}

$(document).ready(function() {
    setTimeout(function() {
        createChart();

        // Initialize the chart with a delay to make sure
        // the initial animation is visible
    }, 400);

    $(document).bind("kendo:skinChange", function(e) {
        createChart();
    });
});