Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Additional binding and tools for KnockoutJS.
JavaScript HTML CSS
Branch: master


Build Status

KoExtensions can be used as standalone JavaScript charting library basedo on D3JS or plug-in for KnockoutJS. Besides charting, when used with Knockout it provides other usefull bindings. Available charts:

Pie Chart Bar Chart Line Chart
alt text alt text alt text
Example Example1 Example2 Example1 Example2
Chord Chart Bubble Chart Histogram
alt text alt text alt text
Example Example Example

Other bindings useful for Knockout:

  • Google maps binding Example
  • Bootstrap DateTime picker binding [Example
  • FormattedValue binding - showing data values in the UI with applied formatting (currencies, rounding). Example

All charts are created with D3JS and based on multiple examples provided in the documentation.

Referencing and using KoExtensions

There are two ways to reference KoExtensions:

  • Reference single KoExtensions.js file. See the example.html file. If used in such way, global variable koExtensions is defined which exposes all the functionality.
  • Use RequireJS. All files in the testpages folder use this approach. KoExtension expects D3 to be defined globally before being loaded.

Both approaches can be used whether KoExtensions is used as standalone charting library or with KnockoutJS. The charting library has to be initialized by calling charting.initializeCharts. In order for the automatic bindings to work with KnockoutJS, registerExtensions method has to be called.

<script src="d3.js"></script>
<script src="KoExtensions.js"></script>
//if you want to use knockout binding, just call:
//otherwise, use charting with all the charts
koext.charting.lineChart(testData, el, chartOptions);

Contributing and building

RequireJS is used to handle dependencies as well as to bundle single referencable JS file, which can be built with NodeJS and RequireJS optimizer:

cd src
node r.js -o

Tests can be run with QUnit:

phantomjs run-qunit.js Tests/Tests.html

Some usefull tips

  • Showing multiple charts in knockout foreach loop can be achieved as follows:

alt text

<!-- ko foreach: cars -->
    <div style="float:left;margin-right:10px">
        <h3 data-bind="text:name"></h3>
        <div data-bind="piechart: data"></div>
 <!-- /ko -->
  • Interesting usage of barchart can be "cashflow chart" which shows a single line, going through the bars being the addition of the bars values. This can be achieved as follows:

alt text

<div id="cashFlow" data-bind="barchart: lifeExpenses, xcoord:'month',line:expensesPerMonth,chartOptions:{legend:true, width:800,height:300,style:'stack',sameScaleLinesAndBars:true}">
function TestViewModels (expenses){
    self = this;
    self.lifeExpenses = ko.observableArray([]);
    self.expensesPerMonth = ko.observableArray([]);
    var totalPerMonth ={
        var keys = Object.keys(item).filter(function(key){return key != 'month';});
        var monthTotal =  { x : item['month'], y : d3.sum(keys, function(key) { return item[key];}) };
        return monthTotal;
  • Hisotgram chart has some additional properties which can be used to vizualize the statisticial distribution, using either Mean or Median and standard variance or MAD (Median absolute deviation)

alt text

<div id="histogram" data-bind="histogram: data, chartOptions : {
        tolerance : 10,
        showProbabilityDistribution: true,min : -20,
        expected: 'median',
        useMAD: true,
        showOutliers: true}"></div>
<div id="map">
<div data-bind="foreach: stations">
    <div data-bind="latitude: lat, longitude:lng, map:map, selected:selected"></div>
function StationViewModel(data){
    var self = this; = ko.observable();
    self.lng = ko.observable(); = ko.observable();
    self.selected = ko.observable();
Something went wrong with that request. Please try again.