Kendo UI Chart for Android (canvg.js)

This example shows a Kendo UI chart that can work on an Android 2.x device using the canvg.js polyfill.

by stackmanoz

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div id="chart"></div>
<h2>Change Chart Type</h2>
<input id="ddlType" />

JavaScript

function createChart(chartType) {
    $("#chart").kendoChart({
        theme: "default",
        transitions: false,
        title: {
            text: "Internet Users"
        },
        legend: {
            position: "bottom"
        },
        chartArea: {
            background: ""
        },
        seriesDefaults: {
            type: chartType
        },
        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}%"
        }
    });


    //Handle Android
    if (!testSvg()) {
        //Get chart SVG and output to canvas
        var chartEle = $("#chart"),
            chart = chartEle.data("kendoChart"),
            svg = chart.svg();

        var canvas = document.createElement("canvas");
        canvas.setAttribute("style", "height:" + chartEle.height() + ";width:" + chartEle.width() + ";");

        canvg(canvas, svg);

        chartEle.empty(); //NOTE: Android 2.1 is hit and miss here
        chartEle.append(canvas);
    }
}

function createList() {
    var options = [{
        text: "Bar",
        value: "bar"},
    {
        text: "Column",
        value: "column"},
    {
        text: "Pie",
        value: "pie"},
    {
        text: "Line",
        value: "line"}];
    var ddl = $("#ddlType").kendoDropDownList(options).data("kendoDropDownList");

    $("#ddlType").bind("change", function() {
        createChart(ddl.value());
    });
}

function testSvg() {
    return !!document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
}

$(document).ready(function() {
    createChart("bar");
    createList();
});