Scalable Vector Graphics Bound to Knockoutjs

by marrok

HTML

<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">
<script src="http://www.sigyl.com/playground/scripts/jquery.jqChart.min.js"></script>
<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>   
    <linearGradient id="deviceBodyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#F0F8FF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#848482;stop-opacity:1" />
    </linearGradient>         
    <linearGradient id="deviceFixedGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#F0F8FF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:Arsenic;stop-opacity:1" />
    </linearGradient>  
    <radialGradient id="deviceOnGradient" cx="50%" cy="100%" r="50%" fx="50%" fy="80%">
      <stop offset="0%" style="stop-color:#66FF00;
      stop-opacity:1" />
      <stop offset="100%" style="stop-color:#03C03C;stop-opacity:1" />
    </radialGradient>         
         <radialGradient id="deviceOffGradient" cx="50%" cy="100%" r="50%" fx="50%" fy="80%">
      <stop offset="0%" style="stop-color:#CC0000;
      stop-opacity:1" />
      <stop offset="100%" style="stop-color:Red;stop-opacity:1" />
    </radialGradient>     
 <clipPath id = "clip1">
    ...

CSS

body {
    font-family: Arial;
    font-size: 12px;
    margin-left : 10px;
    backGround : #8C92AC;
}
a { target-new: tab ! important }

h1 {
    margin-top : 20px;
}
h2 {
    margin-top : 10px;
}
.device {
   filter: url(#drop-shadow); 
}
.deviceBody {
   fill:   url(#deviceBodyGradient); 
}
.deviceFill {
   fill:   #5D8AA8; 
}

.deviceRunning {          
   fill:   url(#deviceOnGradient);
}
.deviceStopped {          
   fill:   url(#deviceOffGradient);
        }

.deviceFixed {           
           fill:   url(#deviceFixedGradient); 
        }
input {
    position:absolute;
    left: 200px;
    height: 16px;
    background : silver;

}
h1, h2 {   
    font-weight: bold;
}
h1 {
    font-size : 16px;
}
p  {
    text-indent:50px;
    margin-top : 3px;
}

JavaScript

var viewModel = {
    fill : ko.observable(50),
    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 kendoData = [];

function updateChart() {
   

 yValue += (Math.random() - .5); 
    
    //rounded to 2 decimal places!!!!
 yValue= Math.round(yValue*Math.pow(10,2))/Math.pow(10,2)  ;
    // remove the first element            
    if(data.length>40) 
    {
        data.splice(0, 1);            
    }

    // add a new element            
    data.push([i++, yValue]);  
    kendoData.push(
    {
                        "reading": "mixer",
                        time: i,
                        "value": yValue
                    });
    if(kendoData.length>400)
    {
        kendoData.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();}, 100);        
  
}

$(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") ||...