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.

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>
<h2>SVG to Canvas</h2>
<div id="container" style="width:300px;height:300px;">
  
  <svg id="svg0" width="1440" height="960" style="display: block;"><g id="shapesg" width="1440" height="960" transform=""><g id="shape0" type="r" sindex="0" x="289" y="383"><g id="shapepathg0"><rect id="shaperect0" x="299" y="185" width="479" height="188" class="shapepath" sindex="0" smode="shape"></rect></g><g id="shapesidesg0"><g id="sideg0"><path id="side0" index="0" sindex="0" smode="shape" d="M289,383l0,-208" class="shapeside"></path></g><g id="sideg1"><path id="side1" index="1" sindex="0" smode="shape" d="M289,175l499,0" class="shapeside"></path></g><g id="sideg2"><path id="side2" index="2" sindex="0" smode="shape" d="M788,175l0,208" class="shapeside"></path></g><g id="sideg3"><path id="side3" index="3" sindex="0" smode="shape" d="M788,383l-499,0" class="shapeside"></path></g></g><g id="shapesideshapesg0"></g><g id="shapecornersg0"><g id="cornergl0"><path id="corner0" index="0" sindex="0" smode="shape" d="M291,381h20v-20h-20" type="0" class="shapecorner"></path></g><g id="cornergl1"><path id="corner1" index="1" sindex="0" smode="shape" d="M291,177h20v20h-20" type="0" class="shapecorner"></path></g><g id="cornergl2"><path id="corner2" index="2" sindex="0" smode="shape" d="M786,177h-20v20h20" type="0" class="shapecorner"></path></g><g id="cornergl3"><path id="corner3" index="3" sindex="0" smode="shape" d="M786,381h-20v-20h20" type="0" class="shapecorner"></path></g></g><g id="shapeedgesg0"><g id="edgeg0"><rect id="edgerect0" index="0" sindex="0" x="265" y="175"...

CSS

/*.pic {

    background-image: url("../Drawing/sink11.svg");
    stroke: white;
        stroke-width: 3px;
        stroke-opacity: 1.0;
        fill: yellow;
        fill-opacity: 0.1;
    }*/
.dcls{
    padding: 0px;border: 0px;border-left: 1px solid lightgray;width:10%
}
.dcls1{
    padding: 0px;border: 0px;border-left: 1px solid lightgray;
}
.dcls2{
    width: 100%;border: 0;
}
.dcls3{
    background-color:lightgoldenrodyellow;font-size:13px
}
.dcls4{
    float:right;color:white;
}
.dcls5{
        width: 100px;    background: lightgoldenrodyellow;    height: 20px;    border: 1px solid;    text-align: right;
}
.dl{
    line-height:22px;font-weight:600;
}
.dh1{
    font-size: 15px;    font-weight: 600;}
.ycolor{
    background:lightgoldenrodyellow;
}
.lycolor{
    background:lightyellow;
}
div.lineTab1 {
    overflow: hidden;
    margin-bottom: 2px;
}
    div.lineTab1 button {
        background-color: inherit;
        border: 1px solid black;
        border-radius: 3px;
        outline: none;
        cursor: pointer;
    }
    div.lineTab1 button:hover {
        background-color: #ddd;
    }
    div.lineTab1 button.active {
        border-left: 4px solid blue;
        font-weight: bold;
        color: black;
    }
.tablinks1:first-letter {
    font-size: 16px;
}

.sideBarInput{
    background-color:lightgreen;border:1px solid black;width: 60px;text-align:center;font-weight:600;color: black;
}
.menu {
    position: relative;
    border: 1px solid #8fdaf9;
    padding: 12px 0px 0px;
    font-size: 11px;
}
.menu:before {
    content: attr(data-title);
    background: #8fdaf9;
    position: absolute;
    padding: 0px 2px;
    color: black;
    left: 5px;
    top: -5px;
}

.blk_color{
    color:black;
}
.hidedropdn{
    width:100%;border:0;background-color:lightyellow;-webkit-appearance: none;-moz-appearance: none;text-indent: 1px;text-overflow: '';
}
.slabimg {
    vertical-align: top;
    float: left;
    text-align: left;
}

.lsvg {
    text-align:...

JavaScript

$(document).ready(function() {
    //Get chart SVG and output to canvas
    var svg = getSvg(),
        container = $("#container");

    //Create a new canvas to hold our rendering
    var canvas = document.createElement("canvas");
    canvas.setAttribute("style", "height:" + container.height() + ";width:" + container.width() + ";");

    //Use canvg to convert SVG to canvas and render the results
    canvg(canvas, svg);

    //Add the new canvas to the page
    container.append(canvas);
});

function getSvg(){
   
}