KoExtensions

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
Example	Example1 Example2	Example1 Example2 With Slidder

Chord Chart	Bubble Chart	Histogram
Example	Example	Example

Other bindings useful for Knockout:

• Google maps binding [Example] googleMapsEx
• Bootstrap DateTime picker binding [[Example] datepickerEx
• 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:
koExtensions.registerExtensions
//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 app.build.js

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:

<!-- ko foreach: cars -->
 	<div style="float:left;margin-right:10px">
	 	<h3 data-bind="text:name"></h3>
		<div data-bind="piechart: data"></div>
 	</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:

<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 = expenses.map(function(item){
		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;
	});
	self.lifeExpenses(expenses);
	self.expensesPerMonth(totalPerMonth);
}

• 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)

<div id="histogram" data-bind="histogram: data, chartOptions : {
        tolerance : 10,
        showProbabilityDistribution: true,min : -20,
        expected: 'median',
        useMAD: true,
        showOutliers: true}"></div>

• Google maps binding is useful anytime you want a list of objects to be vizualized as points on google maps.

• 

<div id="map">
</div>
<div data-bind="foreach: stations">
	<div data-bind="latitude: lat, longitude:lng, map:map, selected:selected"></div>
</div>

function StationViewModel(data){
	var self = this;
	self.lat = ko.observable();
	self.lng = ko.observable();
	self.name = ko.observable();
	self.selected = ko.observable();
}