jQuery Gauge

Set the int64 property of the jqxGauge. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-debug.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="gaugeContainer" data-bind="jqxGauge: {int64: true, width: 500,height: 500,startAngle: 40,endAngle: 300,ranges: [{startValue: '0',endValue: '200',style: {fill: '#CCCCE6',stroke: '#B2B2D9'},endWidth: 5,startWidth: 1}, {startValue: '200',endValue: '400',style: {fill: '#9999CC',stroke: '#8080C0'},endWidth: 10,startWidth: 5}, {startValue: '400',endValue: '600',style: {fill: '#6666B3',stroke: '#4D4DA6'},endWidth: 15,startWidth: 10}, {startValue: '600',endValue: '1000',style: {fill: '#333399',stroke: '#19198D'},endWidth: 20,startWidth: 15}],ticksMinor: {interval: '50',size: '5%'},ticksMajor: {interval: '200',size: '9%'},labels: {interval: '300',formatValue: function (value) {return value;}},cap: {style: {fill: '#333399',stroke: '#19198D'}},pointer: {style: {fill: '#333399',stroke: '#19198D'}},min: min,max: max,value: value,colorScheme: 'scheme03',animationDuration: 1200}"></div>

JavaScript

$(document).ready(function() {
  var viewModel = function(value) {
    this.value = ko.observable(value);
    this.min = ko.observable('0');
    this.max = ko.observable('1000');
    this.disabled = ko.observable(false);
  };

  ko.applyBindings(new viewModel('600'));
});