var scales = $('#jqLinearGauge').jqLinearGauge('option', 'scales');
                scales[0].needles[0].value = Math.random() * 100;

                $('#jqLinearGauge').jqLinearGauge('update');

$(document).ready(function () {

        var gradient1 = {
            type: 'linearGradient',
            x0: 0.5,
            y0: 0,
            x1: 0.5,
            y1: 1,
            colorStops: [{ offset: 0, color: '#C5F80B' },
                         { offset: 1, color: '#6B8901' }]
        };

        var gradient2 = {
            type: 'linearGradient',
            x0: 0.5,
            y0: 0,
            x1: 0.5,
            y1: 1,
            colorStops: [{ offset: 0, color: '#FF3366' },
                         { offset: 1, color: '#B2183E' }]
        };

        var gradient3 = {
            type: 'linearGradient',
            x0: 0.5,
            y0: 0,
            x1: 0.5,
            y1: 1,
            colorStops: [{ offset: 0, color: '#339CFF' },
                         { offset: 1, color: '#1F66A8' }]
        };

        var needleGradient = {
            type: 'linearGradient',
            x0: 0,
            y0: 0.5,
            x1: 1,
            y1: 0.5,
            colorStops: [{ offset: 0, color: '#4F6169' },
                         { offset: 1, color: '#252E32' }]
        };


        $('#jqLinearGauge').jqLinearGauge({
            orientation: 'horizontal',
            background: '#F7F7F7',
            border: {
                padding: 10,
                lineWidth: 4,
                strokeStyle: '#76786A'
            },
            tooltips: {
                disabled: false,
                highlighting: true
            },
           
            scales: [
                {
                    minimum: 0,
                    maximum: 100,
                    customTickMarks: [8, 30, 50, 70, 80, 95],
                    labels: {
                        offset: 0.16
                    },
                    majorTickMarks: {
                        length: 10,
                        offset: 0.28,
                        lineWidth: 2
                    },
                    ranges: [
                        {
                            startValue: 0,
                            endValue: 40,
                            innerOffset: 0.46,
                            outerStartOffset: 0.64,
                            outerEndOffset: 0.75,
                            fillStyle: gradient1
                        },
                        {
                            startValue: 40,
                            endValue: 70,
                            innerOffset: 0.46,
                            outerStartOffset: 0.75,
                            outerEndOffset: 0.84,
                            fillStyle: gradient2
                        },
                        {
                            startValue: 70,
                            endValue: 100,
                            innerOffset: 0.46,
                            outerStartOffset: 0.84,
                            outerEndOffset: 0.90,
                            fillStyle: gradient3
                        }
                    ],
                    needles: [
                        {
                            type: 'pointer',
                            value: 80,
                            cursor: 'pointer',
                            fillStyle: needleGradient,
                            innerOffset: 0.50,
                            outerOffset: 1.00
                        }
                    ]
                }
            ]
        });

        var handledShape = null;

        $('#jqLinearGauge').bind('mousedown', function (e, data) {

            var gauge = $('#jqLinearGauge').jqLinearGauge('linearGauge');
            var mouseInput = gauge.mouseInput;
            var shape = gauge.hitTest(mouseInput.locX, mouseInput.locY);

            if (shape.context.elementType != 'needle') {
                return;
            }

            handledShape = shape;
        });

        $('#jqLinearGauge').bind('mousemove', function (e, data) {

            if (handledShape == null) {
                return;
            }

            var gauge = $('#jqLinearGauge').jqLinearGauge('linearGauge');
            var mouseInput = gauge.mouseInput;

            var scale = handledShape.context.scale;
            var tickMarks = scale.customTickMarks;

            var mouseValue = scale.getValue(mouseInput.locX);

            var snapValue = tickMarks[0];
            var diff = Math.abs(mouseValue - snapValue);

            for (var i = 1; i < tickMarks.length; i++) {

                var vl = tickMarks[i];
                var currDiff = Math.abs(mouseValue - vl);
                if (currDiff < diff) {
                    snapValue = vl;
                    diff = currDiff;
                }
            }

            var scales = $('#jqLinearGauge').jqLinearGauge('option', 'scales');

            if (scales[0].needles[0].value != snapValue) {
                scales[0].needles[0].value = snapValue;

                $('#jqLinearGauge').jqLinearGauge('update');
            }
        });

        $('#jqLinearGauge').bind('mouseup', function (e, data) {

            handledShape = null;
        });
    });