jQWidgets Forums

jQuery UI Widgets › Forums › Gauges and Maps › Gauges › semi-circle

Tagged: , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 11 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    semi-circle Posts
  • October 31, 2013 at 11:07 pm semi-circle #31722

    testuserreg
    Member

    Is it possible to make a semi-circular gauge?

    I can see how most of it works, but not the border.

    November 1, 2013 at 10:30 am semi-circle #31765

    Dimitar
    Participant

    Hello testuserreg,

    Here is an example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var labels = { visible: true, position: 'inside' };
                //Create jqxGauge
                $('#gauge').jqxGauge({
                    ranges: [{ startValue: 0, endValue: 90, style: { fill: '#e2e2e2', stroke: '#e2e2e2' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
                             { startValue: 90, endValue: 140, style: { fill: '#f6de54', stroke: '#f6de54' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
                             { startValue: 140, endValue: 180, style: { fill: '#db5016', stroke: '#db5016' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 },
                             { startValue: 180, endValue: 220, style: { fill: '#d02841', stroke: '#d02841' }, startDistance: '5%', endDistance: '5%', endWidth: 13, startWidth: 13 }
                    ],
                    cap: { radius: 0.04 },
                    caption: { offset: [0, -25], value: 'jQWidgets', position: 'bottom' },
                    value: 0,
                    style: { stroke: '#ffffff', 'stroke-width': '1px', fill: '#ffffff' },
                    animationDuration: 1500,
                    height: 175,
                    startAngle: 0,
                    endAngle: 180,
                    colorScheme: 'scheme04',
                    labels: labels,
                    ticksMinor: { interval: 5, size: '5%' },
                    ticksMajor: { interval: 10, size: '10%' }
                });
                // set gauge's value.
                $('#gauge').jqxGauge('setValue', 220);
            });
        </script>
    </head>
    <body class='default'>
        <div id="gauge" style="float: left;">
        </div>
    </body>
    </html>

    You have to set the height, startAngle and endAngle properties.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.