Knockoutjs.com - Hello World Example

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

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">
<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<div class='liveExample'>   
    <button onclick='copytocanvas()'>copy to canvas</button>   
    <div id='gauge'></div><br />
    <canvas id='canvas'></canvas>
</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() {

     // sets up the jqxGauge
        $('#gauge').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}],
            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, -10],
                interval: 10,
                visible: true
            },
            pointer: {
                style: {
                    fill: '#2e79bb'
                },
                width: 5
            },
            animationDuration: 1500,
            min: 0,
            max: 110,
            value: 0,
            style: {
                stroke: '#FFFFFF',
                'stroke-width': '1px',
                fill: '#FFFFFF'
            }
        });

     
   
}); //end of document ready

function copytocanvas()
{
  ...