mvvm chart

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.metro.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<div id='container'>
 <div id='someIdForChart' data-role="chart"
                 data-title="{ text: 'Spain electricity production' }"
                 data-legend="{ position: 'top' }"
                 data-series-defaults="{ type: 'line' }"
                 data-series="[
                                 { field: 'nuclear', name: 'Nuclear' },
                                 { field: 'hydro', name: 'Hydro' },
                                 { field: 'wind', name: 'Wind' }
                             ]"
                  data-x-Axis ="{  
                                  title: {                                                             text: 'Dates',  
                                    
                                  background: 'green',
                                                                                                      border: {
                                                                                                          width: 1
                                                                                                      }
                                                                                          }
                                                                                      }"
                             
                 data-bind="source: electricity"></div>
</div>

JavaScript

var vm = new kendo.observable({ electricity: new kendo.data.DataSource({data:[1,2,3]})});
kendo.bind($('#container'),vm);

//fix for charts/editors on same page for iphones
var chart = $('#someIdForChart').getKendoChart();
if (chart._userEvents) {
    chart._userEvents.destroy();
}