Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify bullet graph animation.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Animations 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
                },
                tooltips: {
                    disabled: false,
                    highlighting: false
                },
                animation: {
                    enabled: true,
                    duration: 2,
                    delayTime: 1
                },
                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: 80,
                            fillStyle: comparativeMeasureGradient
                        }
                    ],
                featuredMeasures:
                    [
                        {
                            title: 'Featured Measure',
                            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>