JQX Binding Handlers

http://knockoutjs.com/examples/helloWorld.html

by Shrikrishna Gupta

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.js"></script>
<script src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgauge.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class='liveExample'>   
    <p>Awesome Value <input data-bind='value: awesomeValue' /></p>     
    <div data-bind='gauge: awesomeValue'></div><br />
    <!-- uncomment this to see how it should work -->
    <div data-bind='slider: awesomeValue, sliderOptions: {max:150}'></div>
    
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

$(document).ready(function() {

    var ViewModel = function() {
        this.awesomeValue = ko.observable(100);
    };

    ko.applyBindings(new ViewModel());
});


//links the gauge to the other observables
ko.bindingHandlers.gauge = {
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {

        // sets up the jqxGauge
        $(element).jqxGauge({
            ranges: [{
                startValue: 0,
                endValue: 70,
                style: {
                    fill: '#FC6A6A',
                    stroke: '#FC6A6A'
                },
                endWidth: 13,
                startWidth: 0},
            {
                startValue: 70,
                endValue: 95,
                style: {
                    fill: '#fad00b',
                    stroke: '#fad00b'
                },
                endWidth: 20,
                startWidth: 13},
            {
                startValue: 95,
                endValue: 110,
                style: {
                    fill: '#4cb848',
                    stroke: '#4cb848'
                },
                endWidth: 25,
                startWidth: 20},
             {
                startValue: 110,
                endValue: 150,
                style: {
                    fill: '#4cb888',
                    stroke: '#4cb838'
                },
                endWidth: 35,
                startWidth: 25}],
            cap: {
                radius: 0.04
            },
            border: {
                style: {
                    fill: '#8e9495',
                    stroke: '#7b8384',
                    'stroke-width': 1
                }
            },
            ticksMinor: {
                interval: 30,
                size: '0%'
            },
            ticksMajor: {
                interval: 30,
                size: '0%'
            },
            colorScheme: 'scheme06',
            labels: {
                position: 'none',
                offset: [-10,...