Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify bullet graph comparative measures.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Comparative Measures 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">
        $(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 comparativeMeasureGradient = {
                type: 'linearGradient',
                x0: 0,
                y0: 0,
                x1: 1,
                y1: 0,
                colorStops: [{ offset: 0, color: '#E4E4E4' },
                             { offset: 0.552, color: '#FFFFFF' }]
            };


            $('#jqBulletGraph').jqBulletGraph({
                orientation: 'horizontal',
                border: {
                    lineWidth: 0
                },
                tooltips: {
                    disabled: false,
                    highlighting: false
                },
                animation: {
                    duration: 1
                },
                quantitativeScale: {
                    minimum: 0,
                    maximum: 100,
                    background: scaleBackgroundGradient,
                    labels: {
                        offset: 0.95
                    }
                },
                comparativeMeasures:
                    [
                        {
                            value: 80,
                            fillStyle: comparativeMeasureGradient
                        },
                        {
                            value: 60
                        },
                        {
                            value: 50,
                            innerOffset: 0.2,
                            outerOffset: 0.8,
                            width: 8
                        }
                    ]
            });
        });
    </script>

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