Kendo UI Chart for Android (fabric.js)

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

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="https://raw.github.com/kangax/fabric.js/master/dist/all.min.js"></script>
<div id="chart"></div>
<canvas id="test"></canvas>

JavaScript

function createChart() {
    return $("#chart").kendoChart({
        theme: $(document).data("kendoSkin") || "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}%"
        }
    });
}

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

$(document).ready(function() {
    var chartEle = createChart(),
        chart = $(chartEle).data("kendoChart");


    //Handle Android
    if (testSvg()) {
        //Get chart SVG and output to canvas
        var svg = chart.svg();

        var canvas = $("#test")[0]; //document.createElement("canvas");
        canvas.setAttribute("style", "height:" + chartEle.height() + ";width:" + chartEle.width() + ";");

        //chartEle.children().hide();            
        //$(chartEle).append(canvas);
        
        //svg = "<svg xmlns='http://www.w3.org/2000/svg' version='1.1'>"+ 
        //          "<polygon points='200,10 250,190 160,210' style='fill:lime;stroke:purple;stroke-width:1'/>"+ 
        //          "</svg>";
        
        //FabricJS
        fabric.loadSVGFromString(svg, function(objects, options) {
            var shape = new fabric.PathGroup(objects, options),
                fabCanvas = new fabric.Canvas(canvas, {selection:false});

           ...