Skip to content

Instantly share code, notes, and snippets.

@RobertSudwarts
Forked from jmhdez/ko-chart.js
Last active August 29, 2015 14:25
Show Gist options
  • Save RobertSudwarts/cb73d6dab550b7456482 to your computer and use it in GitHub Desktop.
Save RobertSudwarts/cb73d6dab550b7456482 to your computer and use it in GitHub Desktop.
Custom bindings to use Chart.js with Knockout.js
/*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')) || {};
if (this.chart) {
this.chart.destroy();
delete this.chart;
}
this.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