Skip to content

Instantly share code, notes, and snippets.

@xalunda
Forked from mika76/ko-chart.js
Created May 2, 2018 15:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xalunda/364a81bcda987cf93ec752e3752fe433 to your computer and use it in GitHub Desktop.
Save xalunda/364a81bcda987cf93ec752e3752fe433 to your computer and use it in GitHub Desktop.
Chart.js Knockout bindings
/*global ko, Chart */
(function(ko, Chart) {
ko.bindingHandlers.chartType = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
if (!allBindings.has('chartData')) {
throw Error('chartType must be used in conjunction with chartData and (optionally) chartOptions');
}
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var ctx = element.getContext('2d'),
type = ko.unwrap(valueAccessor()),
data = ko.unwrap(allBindings.get('chartData')),
options = ko.unwrap(allBindings.get('chartOptions')) || {};
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).chart.destroy();
delete $(element).chart;
});
$(element).chart = new Chart(ctx)[type](data, options);
}
};
ko.bindingHandlers.chartData = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
if (!allBindings.has('chartType')) {
throw Error('chartData must be used in conjunction with chartType and (optionally) chartOptions');
}
}
};
ko.bindingHandlers.chartOptions = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
if (!allBindings.has('chartData') || !allBindings.has('chartType')) {
throw Error('chartOptions must be used in conjunction with chartType and chartData');
}
}
};
})(ko, Chart);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment