Knockout ChartJS Binding

Test and examples of interactive Knockout ChartJs binding

by James Burton

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<h1>Knockout Chart Binding Example</h1>

<canvas width="200" height="200" data-bind="chartType: 'Doughnut',
    segmentClick: alertLabel,
 
                                        chartData: machines,
                                        chartOptions : {
                                            animation : true,
                                            showTooltips: true,
                                            percentageInnerCutout : 50,
                                            segmentShowStroke : true,
                                                segmentStrokeColor: '#222222'
                                            
                                        }
                                        "></canvas>
<canvas width="300" height="150" data-bind="chartType: 'Bar',
    barClick: alertJson,
 
                                        chartData: browserData,
                                        chartOptions : {
                                            animation : true,
                                            showTooltips: true,
                                            segmentShowStroke : true,
                                                segmentStrokeColor: '#222222'
                                            
                                        }
                                        "></canvas>
<canvas width="300" height="150" data-bind="chartType: 'Line',
    lineClick: alertJson,
 
                                        chartData: lineData,
                                        chartOptions : {
                                            animation : true,
                                            showTooltips: true,
                                            segmentShowStroke : true,
                                           ...

JavaScript

/***** ko-chart.js *****/
/*global ko, Chart */

(function (ko, Chart) {
    ko.bindingHandlers.barClick = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            if (!allBindings.has('chartData')) {
                throw Error('chartType must be used in conjunction with chartData and (optionally) chartOptions');
                return;
            }
            var chartType = allBindings.get('chartType');
            if (chartType !== 'Bar') {
                throw Error('barClick can only be used with chartType Bar');
                return;
            }
        },
        update: function (element, valueAccesor, allBindings, viewModel, bindingContext) {}
    };
    ko.bindingHandlers.lineClick = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            if (!allBindings.has('chartData')) {
                throw Error('chartType must be used in conjunction with chartData and (optionally) chartOptions');
                return;
            }
            var chartType = allBindings.get('chartType');
            if (chartType !== 'Line') {
                throw Error('lineClick can only be used with chartType Line');
                return;
            }
        },
        update: function (element, valueAccesor, allBindings, viewModel, bindingContext) {}
    };
    ko.bindingHandlers.segmentClick = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            if (!allBindings.has('chartData')) {
                throw Error('chartType must be used in conjunction with chartData and (optionally) chartOptions');
                return;
            }
            var chartType = allBindings.get('chartType');
            if (chartType !== 'Pie' && chartType !== 'Doughnut') {
                throw Error('segmentClick can only be used with chartType Pie or Donut');
                return;
            }
        },
        update: function...