jQuery UI Widgets › Forums › Gauges and Maps › Gauges › Linear Guage starting at 0 with positive and negative range

Tagged: , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 11 years, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Linear Guage starting at 0 with positive and negative range Posts
  • June 21, 2013 at 8:07 pm Linear Guage starting at 0 with positive and negative range #23603

    jgaris
    Participant

    Is it possible to create a linear gauge that ranges from -100 to +100 but the starts from the middle at 0, and either goes forward for positive values or backwards for negative values?

    June 24, 2013 at 7:17 am Linear Guage starting at 0 with positive and negative range #23653

    Dimitar
    Participant

    Hello jgaris,

    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.8.3.min.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.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/jqxexpander.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/jqxslider.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getDemoTheme(),
                    majorTicks = { size: '10%', interval: 10 },
                    minorTicks = { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
                    labels = { interval: 20 };
                $('#gauge').jqxLinearGauge({
                    orientation: 'vertical',
                    labels: labels,
                    ticksMajor: majorTicks,
                    ticksMinor: minorTicks,
                    min: -100,
                    max: 100,
                    value: 0,
                    pointer: { size: '6%' },
                    colorScheme: 'scheme05',
                    ranges: [
                    { startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
                    { startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
                    { startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}]
                });
            });
        </script>
        <style type="text/css">
            .demo-options
            {
                list-style: none;
                padding: 0px;
                margin: 10px;
            }
            .demo-options li
            {
                padding: 3px;
                font-family: Verdana;
                font-size: 12px;
            }
        </style>
    </head>
    <body class='default'>
        <div id="gauge" style="margin-left: 20px; float: left;">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    June 25, 2013 at 1:46 am Linear Guage starting at 0 with positive and negative range #23775

    jgaris
    Participant

    Hi Dimitar,

    Thank you for the code, however that was not what I was looking for. In your example the guage bar starts at -100 and you have the value set to 0. I want the guage bar to start at 0, and extend down for negative or extend up from 0 for positive.

    Thank you

    June 25, 2013 at 5:59 am Linear Guage starting at 0 with positive and negative range #23795

    Dimitar
    Participant

    Hi jgaris,

    In the negative case, set the min property to -100 and the max property to 0. In the positive case, set them to 0 and 100 respectively. You may do a check for the value before initializing the widget and set the min and max properties accordingly, i.e.:

    var min;
    var max;
    if (value >= 0) {
        min = 0;
        max = 100;
    } else {
        min = -100;
        max = 0;
    };
    $('#gauge').jqxLinearGauge({
        // ...
        min: min,
        max: max,
        value: value,
        // ...
    });

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.