KO + custom binding + HighCharts

by Sky Sigal

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<!--<div data-bind="test: {}" />-->

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>


<div class="" data-bind="highcharts:{options:highChartOptions}" style="min-width: 310px; height: 200px; margin: 0 auto"></div>

JavaScript

ko.bindingHandlers.highcharts = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        $e = $(element);
			
			if ($e.highcharts == undefined){
				$e.text("highcharts function not recognized: library loaded?");
				return;
			}
      
			//if (!$e.hasClass( "epoch" )){$e.addClass('epoch');}
			
			//Get the value, if it is observable, not the function:
			var value = valueAccessor();
        	//var value = ko.unwrap(value);
			//value = ko.toJS(value);
			var options = (value!=null)&&(value.options!=null)?value.options:value;
        
            $e.highcharts(options);
      

    },
    update: function(element, valueAccessor, allBindingsAccessor) {
    }
}


        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
    
    

var viewModel = {
    
    onLoad : function(e){
                        var chart = e.target;
        
     							// set up the updating of the chart each second
								var series = chart.series[0];
     							window.setInterval(function() {
									var x = (new Date()).getTime(), // current time
										y = Math.random();
                                        series.addPoint([x, y], true, true);
								}, 1000);
    },
    
    
    
    highChartOptions :  
    {
         chart: {
                type: 'line',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 5,
                 borderRadius:0,
             plotShadow:{color:'#FF0000'},
             shadow:false,
             spacing: [5,0,5,0],
                events: {
                    load: function(e) { viewModel.onLoad(e); }
                }
            },
        title: {
            text:'',
        },
        subtitle: {
            text: '',
        },
        credits: {    enabled:false,
                      text:''
        },
        plotOptions:  {
            line: {
                marker: {
                        radius:2,
            ...