Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to set the appearance of bullet graph labels.
The labels are formatted using sprintf.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Labels 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 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,
                    padding: 10
                },
                tooltips: {
                    disabled: false,
                    highlighting: false
                },
                animation: {
                    duration: 1
                },
                quantitativeScale: {
                    minimum: 0,
                    maximum: 100,
                    background: scaleBackgroundGradient,
                    labels: {
                        offset: 0.95,
                        fillStyle: '#B2183E',
                        stringFormat: '%dK',
                        font: '12px sans-serif'
                    },
                    qualitativeRanges:
                        [
                            {
                                value: 47,
                                fillStyle: range1Gradient
                            },
                            {
                                value: 70,
                                fillStyle: range2Gradient
                            }
                        ]
                },
                comparativeMeasures:
                    [
                        {
                            value: 80,
                            fillStyle: comparativeMeasureGradient
                        }
                    ],
                featuredMeasures:
                    [
                        {
                            value: 90,
                            innerOffset: 0.4,
                            outerOffset: 0.6,
                            fillStyle: featuredMeasureGradient
                        }
                    ]
            });
        });
    </script>

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