Scalable Vector Graphics Bound to Knockoutjs

HTML

<script src="http://www.jqchart.com/js/jquery.jqChart.min.js"></script>
<link rel="stylesheet" href="http://www.jqchart.com/css/jquery.jqChart.css">
<script src="http://sigyl.com/playground/scripts/knockout-latest.debug.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<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">
<h1>Scalable Vector Graphics Bound to Knockoutjs and using a jqChart</h1>
using modified version of Knockout as per <a href='https://github.com/SteveSanderson/knockout/pull/337'>
https://github.com/SteveSanderson/knockout/pull/337</a>
<div>
Drop shadow does not work on IE9 and Safari - prettier on Chrome, Opera and Firefox
</div>
<div id='mimic'>
    <svg width="600px" height="200px">
     <defs>                
          <filter id="drop-shadow" filterUnits="userSpaceOnUse" x="100" y="0">
          <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="4" />
          <feOffset in="blur-out" result="the-shadow" dx="3" dy="3"/> 
          <feBlend in="SourceGraphic" in2="the-shadow" mode="normal"/>         
        </filter>       
      </defs>        

        
<path style="vector-effect: non-scaling-stroke; " class='deviceBody' d="m125,194.76041l199.75,-0.23958c20.08334,-38.25348 20.16666,-76.50695 0.25,-114.76041l-200,0.23958c-20,38.25346 -20,76.50694 0,114.76041z" id="svg_6"/>   

     <g>
        <title>Lid</title>        
        <path id="lid" d="m150,80l150,0c-50,-15 -100,-15 -150,0z" class='deviceFixed'  data-bind="attr : { transform : (!lid() ? 'rotate(20 290 60)' : 'rotate(0 290 60)')}, click: changeLid" />
        <ellipse ry="5" rx="5" id="svg_9" cy="80" cx="290" class='deviceFixed' />
         <text x='300' y='70' data-bind = 'text: !lid() ? "Click on the lid to close it" : "Click on the lid to open it"' />
     </g>
     <g>   
     ...

CSS

body {
    font-family: Arial;
    font-size: 12px;
}
h1 {
    margin-top : 20px;
}
h2 {
    margin-top : 10px;
}
.device {
   filter: url(#drop-shadow); 
}
.deviceBody {
   fill:   #B2BEB5; 
}
.deviceRunning {          
   fill:   #00cc00;
}
.deviceStopped {          
           fill:   red;
        }

.deviceFixed {           
           fill:   gray;
        }
input {
    position:absolute;
    left: 200px;
    height: 13px;
}
h1, h2 {   
    font-weight: bold;
}
h1 {
    font-size : 16px;
}
p  {
    text-indent:50px;
    margin-top : 3px;
}

JavaScript

var viewModel = {
    dev2Speed: ko.observable(0),
    dev1Speed: ko.observable(1),
    dev1Amps: ko.observable(0.0),
    lid: ko.observable(true),
    changeLid: function(data) {
        data.lid(!data.lid());
    }
};

ko.applyBindings(viewModel, $("#mimic")[0]);

var data = [];
var yValue=0; 
var i = 1000;

var internetUsers = [];

function updateChart() {
   

 yValue += Math.round(Math.random() * 20 - 10); 
    // remove the first element            
    if(data.length>40) 
    {
        data.splice(0, 1);            
    }

    // add a new element            
    data.push([i++, yValue]);  
    internetUsers.push(
    {
                        "reading": "mixer",
                        time: i,
                        "value": yValue
                    });
    if(internetUsers.length>40)
    {
        internetUsers.splice(0, 1);  
    }
    
    $('#jqChart').jqChart({
        title: {
            text: 'Live Data'
        },
        
        series: [{
            type: 'line',
            data: data,
            markers: null,
            title: 'amps'}]
    });
    
   
updateKendoChart();    
viewModel.dev1Amps(yValue);    
      
    setTimeout(function(){updateChart();}, 1000);        
  
}

$(document).ready(function() {
                    setTimeout(function() {
                       
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createKendoChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createKendoChart();
                        });
                        updateChart();
                    }, 400);

});




function createKendoChart() {
                    $("#chart").kendoChart({                     
                        theme: $(document).data("kendoSkin") || "default",
                        dataSource: {
                            data: internetUsers
      ...