Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify bullet graph live data.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Live Data Example - HTML5 jQuery Bullet Graph 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};

        $(document).ready(function () {

            var scaleBackgroundGradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 1,
                x1: 0,
                y1: 0,
                colorStops: [{ offset: 0, color: '#A4D020' },
                             { offset: 0.993, color: '#BFFE01' }]
            };

            var range1Gradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 1,
                colorStops: [{ offset: 0, color: '#61B603' },
                             { offset: 1, color: '#448100' }]
            };

            var range2Gradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 1,
                x1: 0,
                y1: 0,
                colorStops: [{ offset: 0, color: '#87B202' },
                             { offset: 1, color: '#A6DC01' }]
            };

            var comparativeMeasureGradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 1,
                y1: 0,
                colorStops: [{ offset: 0, color: '#E4E4E4' },
                             { offset: 0.552, color: '#FFFFFF' }]
            };

            var featuredMeasureGradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 0,
                y1: 1,
                colorStops: [{ offset: 0, color: '#BABABA' },
                             { offset: 0.495, color: '#FFFFFF' }]
            };


            $('#jqBulletGraph').jqBulletGraph({
                orientation: 'horizontal',
                border: {
                    lineWidth: 0
                },
                tooltips: {
                    disabled: false,
                    highlighting: false
                },
                quantitativeScale: {
                    name: 'Main Scale',
                    minimum: 0,
                    maximum: 100,
                    background: scaleBackgroundGradient,
                    labels: {
                        offset: 0.95
                    },
                    qualitativeRanges:
                        [
                            {
                                value: 47,
                                fillStyle: range1Gradient
                            },
                            {
                                value: 70,
                                fillStyle: range2Gradient
                            }
                        ]
                },
                comparativeMeasures:
                    [
                        {
                            title: 'Comparative Measure',
                            value: values.v1,
                            fillStyle: comparativeMeasureGradient
                        }
                    ],
                featuredMeasures:
                    [
                        {
                            title: 'Featured Measure',
                            value: values.v2,
                            innerOffset: 0.4,
                            outerOffset: 0.6,
                            fillStyle: featuredMeasureGradient
                        }
                    ]
            });
            updateGraph();
        });

        function updateGraph() {

            $(values).animate({
                v1: Math.round(20 + Math.random() * 80),
                v2: Math.round(20 + Math.random() * 80)
            },
            {
                duration: 600,
                step: function () {
                    var comparativeMeasures = $('#jqBulletGraph').jqBulletGraph('option', 'comparativeMeasures');
                    comparativeMeasures[0].value = this.v1;

                    var featuredMeasures = $('#jqBulletGraph').jqBulletGraph('option', 'featuredMeasures');
                    featuredMeasures[0].value = this.v2;

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

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