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 toddanglin

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>
<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<h1>1</h1>
<div id="chart"></div>

JavaScript

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

    //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();
    chartEle.append(canvas);
}

function getChartSvg(){
    return '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="529px" height="400px" style="position: relative; display: block;"><defs><linearGradient id="k2254e6a586521033" gradientTransform="rotate(90)"> <stop offset="0%" style="stop-color:#fff;stop-opacity:0"></stop><stop offset="10%" style="stop-color:#fff;stop-opacity:0"></stop><stop offset="25%" style="stop-color:#fff;stop-opacity:0.3"></stop><stop offset="92%" style="stop-color:#fff;stop-opacity:0"></stop><stop offset="100%" style="stop-color:#fff;stop-opacity:0"></stop></linearGradient></defs><path d="M0 0 529 0 529 400 0 400 z" stroke="" stroke-width="0" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1"...