jQWidgets Forums

jQuery UI Widgets Forums Gauges and Maps Gauges semi-circle

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
  • 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.

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.