KO + custom binding + HighCharts

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,
        }
      },
    },
    legend: {
      enabled: true,
      layout: 'vertical',
    },
    xAxis: {
      type: 'datetime',
      minRange: 100 * 1000,
    },
    yAxis: {
      title: {
        text: ''
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }],
      floor: 0,
      ceiling: 1.0
    },

   ...