C3.JS Knockout bindings

gistfile1.js

ko.bindingHandlers.chartColumns = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var columns = ko.unwrap(valueAccessor()),
            options = ko.unwrap(allBindings.get('chartOptions')) || {};

        options = $.extend(true, options, {
            bindto: element,
            data: {
                columns: columns
            }
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $.data(element, 'chart').destroy();
        });

        $.data(element, 'chart', c3.generate(options));
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var columns = ko.unwrap(valueAccessor())
            //options = ko.unwrap(allBindings.get('chartOptions')) || {};

        options = {
            columns: columns,
            unload: true
        };

        $.data(element, 'chart').load(options);
    }
};

ko.bindingHandlers.chartOptions = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        if (!allBindings.has('chartColumns')) {
            throw Error('chartOptions must be used in conjunction with chartColumns');
        }
    }
};

/* Example usage
   Note: Chart_ActiveMachines should return a columns array (or arrays) as defined for type of chart in c3.js
   
<div data-bind="
    chartColumns: Chart_ActiveMachines,
    chartOptions : { 
        data : { 
            type: 'donut' 
        },
        donut: {
            title: Machines().length
        }

    }">
</div>
*/