Kendo UI + Knockout + Highcharts

using Kendo Slider to update Highcharts via Knockout MVVM

by Ben South

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://knockoutjs.com/js/knockout-2.2.0.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.highcharts.com/highcharts.js"></script>
<h1>Binding a Kendo UI slider to Highcharts using Knockout </h1>

<div id="pieChartContainer"></div>
<div id="log" style="height:150px; overflow-y: scroll;" data-bind="visible: showLog"></div>
<input type="checkbox" data-bind="checked: showLog" /> Show Log
<div data-bind="foreach: items">    
    <label data-bind="text: name"></label>
    <input type="number" data-bind="value: spend" />
    <input data-bind="kendoSlider: {value: percentageDelta, min: -100, max: 200, smallStep: 10, largeStep: 50, showButtons: false }" />
    <hr/>
</div>

CSS

h1 { font-size: 1.5em; }
h2 { font-size: 1.25em; }

JavaScript

//  Configure the chart
var marketingPlanSpendPieChartOptions = {
    credits:{enabled:false},
    chart: {
        type: 'pie',
        renderTo: 'pieChartContainer',
        plotShadow: false
    },
    title: { text: 'Plan Chart' },
    tooltip: {
        pointFormat: '<b>{point.percentage}%</b>',
        percentageDecimals: 1
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function() {
                    return '<span style="font-size: 12px">' + this.point.name + ': ' + '$' + this.point.y + 'M</span>';
                }
            },
            showInLegend: true
        }
    },
    legend: {
        floating: true,
        align: 'right',
        layout: 'vertical',
        verticalAlign: 'middle',
        labelFormatter: function() {
            return '<span style="color: black; font-size: 12px">' + this.name + '</span>';
        }
    },
    series: [{ type:'pie', name:'SpendOverTime'}]
};

var data = [
{
	"name":"Print","y":3, 
	"percentageDelta" : 0
},
{
	"name":"Digital","y":8,
	"percentageDelta" : 0
}];

 marketingPlanSpendPieChartOptions.series[0].data = data;
var chart = new Highcharts.Chart(marketingPlanSpendPieChartOptions);

function Slider(item, idx){
    this.data = item;
    this.id = ko.observable(idx);
    this.name = ko.observable(item.name);
    this.spend = ko.observable(item.y);
    this.original = item.y;
    this.percentageDelta = ko.observable(item.percentageDelta);
    
    this.reset = ko.observable(true);
    
    this.percentageDelta.subscribe(function (newPercentage) {
       var amt = this.original + (this.original * (newPercentage/100));
        this.reset(false);
        $('#log').append('Slider: ');
        this.spend(amt);
        this.reset(true);
    }, this);
    
    
   ...