kendoChartOptions binding

Generically allows kendoChart options to be observable

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div style="margin:20px">
    <input type="text" class="text-left" data-bind="value:chartTitle,valueUpdate:'afterkeydown'" style="width:300px">
    <button class="btn-info" data-bind="click: addData">Add Data</button>
    <button class="btn-info" data-bind="click: addSeries">Add Series</button>
    <button class="btn-info" data-bind="click: newProp">Dynamic Property</button>
    <div>
        <label for="transitions" class="checkbox">transitions on?
            <input type="checkbox" class="checkbox" data-bind="checked:transitions" />
        </label>
    </div>
    <div>Change Theme:
        <select data-bind="options:themes,optionsText:'text',optionsValue:'value',value:selectedTheme,optionsCaption:'Choose a theme'"></select>
    </div>
    <div data-bind="kendoChart: chart" style="margin:20px"></div>
</div>

JavaScript

//overwrite the createBinding for the kendoChart with the new watch properties for options
ko.kendo.bindingFactory.createBinding({
    name: "kendoChart",
    watch: {
        data: function (value) {
            ko.kendo.setDataSource(this, value);
        },
        options: function (value) {
            //unwrap observables from the options object
            var jsonOptions = ko.toJSON(value);
            //convert the unwrapped json to a plain object
            var options = JSON.parse(jsonOptions);
            //pass the options to the chart's setOptions method
            this.setOptions(options);
            this.refresh();
        }

    }
});

var VM = function () {
    var Record = function (number) {
        this.name = 'Record ' + number;
        this.value1 = number++;
        this.value2 = number++;
        this.value3 = number++;
        this.value4 = number++;
        this.value5 = number++;
        this.value6 = number++;
    }

    var records = _([1, 2, 3, 4]).reduce(function (results, number) {
        return _(results).push(new Record(number));
    }, []);

    this.themes = [{
        text: "Black",
        value: "black"
    }, {
        text: "Blue Opal",
        value: "blueopal"
    }, {
        text: "Default",
        value: "default"
    }, {
        text: "Metro",
        value: "metro"
    }, {
        text: "Silver",
        value: "silver"
    }, {
        text: "Bootstrap",
        value: "bootstrap"
    }, {
        text: "Uniform",
        value: "uniform"
    }, {
        text: "Metro Black",
        value: "metroblack"
    }, {
        text: "High Contrast",
        value: "highcontrast"
    }, {
        text: "Moonlight",
        value: "moonlight"
    }, {
        text: "Flat",
        value: "flat"
    }];

    //initialise series count for adding series dynamically
    this.seriesNum = 2;
    this.data = ko.observableArray(records);
    this.series = ko.observableArray([{
        field: 'value1',
        name: "series...