Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


Labels Orientation:

This sample demonstrates how to specify radial gauge labels orientation. The possible options are: horizontal, radial and circular.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
    Labels Orientation Example - HTML5 jQuery Radial 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">
        $(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.5,
                y0: 0,
                x1: 0.5,
                y1: 1,
                colorStops: [{ offset: 0, color: '#FF3366' },
                             { offset: 1, color: '#B2183E'}]
            };

            var anchorGradient = {
                type: 'radialGradient',
                x0: 0.35,
                y0: 0.35,
                r0: 0.0,
                x1: 0.35,
                y1: 0.35,
                r1: 1,
                colorStops: [{ offset: 0, color: '#4F6169' },
                             { offset: 1, color: '#252E32'}]
            };

            $('#jqRadialGauge').jqRadialGauge({
                background: '#F7F7F7',
                border: {
                    lineWidth: 6,
                    strokeStyle: '#76786A',
                    padding: 20
                },
                shadows: {
                    enabled: true
                },
                anchor: {
                    visible: true,
                    fillStyle: anchorGradient,
                    radius: 0.10
                },
                tooltips: {
                    disabled: false,
                    highlighting: true
                },
                animation: {
                    duration: 1
                },
                scales: [
                         {
                             minimum: 100,
                             maximum: 1000,
                             startAngle: 140,
                             endAngle: 400,
                             majorTickMarks: {
                                 length: 12,
                                 lineWidth: 2,
                                 interval: 100,
                                 offset: 0.80
                             },
                             minorTickMarks: {
                                 visible: true,
                                 length: 8,
                                 lineWidth: 2,
                                 interval: 20,
                                 offset: 0.80
                             },
                             labels: {
                                 orientation: 'circular',
                                 font: '12px sans-serif',
                                 interval: 100,
                                 offset: 1.00
                             },
                             needles: [
                                        {
                                            value: 650,
                                            type: 'pointer',
                                            outerOffset: 0.76,
                                            mediumOffset: 0.66,
                                            width: 10,
                                            fillStyle: '#252E32'
                                        }
                                      ],
                             ranges: [
                                        {
                                            outerOffset: 0.78,
                                            innerStartOffset: 0.72,
                                            innerEndOffset: 0.64,
                                            startValue: 300,
                                            endValue: 700,
                                            fillStyle: gradient1
                                        },
                                        {
                                            outerOffset: 0.78,
                                            innerStartOffset: 0.64,
                                            innerEndOffset: 0.56,
                                            startValue: 700,
                                            endValue: 1000,
                                            fillStyle: gradient2
                                        }
                                     ]
                         }
                        ]
            });

            $('#labelsOrientation').change(function (e) {

                var labelsOrientation = $('#labelsOrientation').val();
                
                var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
                scales[0].labels.orientation = labelsOrientation;

                $('#jqRadialGauge').jqRadialGauge('update');
            });
        });

    </script>

</head>
<body>
    <div>
        <div id="jqRadialGauge" style="width: 350px; height: 350px;">
        </div>
        <br />
        Labels Orientation:
        <select id="labelsOrientation">
            <option selected="selected">circular</option>
            <option>radial</option>
            <option>horizontal</option>
        </select>
    </div>
</body>
</html>