Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify linear gauge live data.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Live Data Example - HTML5 jQuery Linear Gauge Plugin by jqChart
</title>
	<link rel="stylesheet" type="text/css" href="../../css/jquery.jqGauges.css" />
	<script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="../../js/jquery.jqGauges.min.js" type="text/javascript"></script>
	
    <script lang="javascript" type="text/javascript">

        var values = { v1: 80, v2: 70, v3: 90 };

        $(document).ready(function () {
            var gradient1 = {
                type: 'linearGradient',
                x0: 0,
                y0: 0.5,
                x1: 1,
                y1: 0.5,
                colorStops: [{ offset: 0, color: '#C5F80B' },
                             { offset: 1, color: '#6B8901'}]
            };

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

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

            $('#jqLinearGauge').jqLinearGauge({
                orientation: 'vertical',
                background: '#F7F7F7',
                border: {
                    lineWidth: 4,
                    strokeStyle: '#76786A',
                    padding: 8
                },
                scales: [
                         {
                             minimum: 0,
                             maximum: 100,
                             interval: 10,
                             labels: {
                                 offset: 0.03
                             },
                             majorTickMarks: {
                                 offset: 0.20,
                                 lineWidth: 2
                             },
                             minorTickMarks: {
                                 visible: true,
                                 offset: 0.24,
                                 interval: 2,
                                 lineWidth: 2
                             },
                             barMarkers: [
                                            {
                                                value: values.v1,
                                                fillStyle: gradient1,
                                                innerOffset: 0.40,
                                                outerOffset: 0.56
                                            },
                                            {
                                                value: values.v2,
                                                fillStyle: gradient2,
                                                innerOffset: 0.60,
                                                outerOffset: 0.76
                                            },
                                            {
                                                value: values.v3,
                                                fillStyle: gradient3,
                                                innerOffset: 0.80,
                                                outerOffset: 0.96
                                            }
                                         ]
                         }
                    ]
            });

            updateGauge();
        });

        function updateGauge() {

            $(values).animate({
                v1: Math.round(20 + Math.random() * 80),
                v2: Math.round(20 + Math.random() * 80),
                v3: Math.round(20 + Math.random() * 80)
            },
            {
                duration: 600,
                step: function () {
                    var scales = $('#jqLinearGauge').jqLinearGauge('option', 'scales');

                    scales[0].barMarkers[0].value = this.v1;
                    scales[0].barMarkers[1].value = this.v2;
                    scales[0].barMarkers[2].value = this.v3;

                    $('#jqLinearGauge').jqLinearGauge('update');
                },
                complete: function () {
                    setTimeout('updateGauge()', 400);
                }
            });
        }
    </script>

</head>
<body>
    <div>
        <div id="jqLinearGauge" style="width: 110px; height: 400px;">
        </div>
    </div>
</body>
</html>