jQWidgets Forums

jQuery UI Widgets › Forums › Gauges and Maps › Gauges › remove negative value

Tagged: , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  cyberfilou 12 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    remove negative value Posts
  • October 14, 2012 at 6:22 pm remove negative value #9400

    cyberfilou
    Member

    hello, how to remove negative value in a linear Gauge
    http://cyberfilou.dyndns.tv/jqwidgets/test3.php

    October 15, 2012 at 6:19 am remove negative value #9426

    Dimitar
    Participant

    Hello cyberfilou,

    You may set the property min to 0 and the gauge will show only positive values:

    $('#gauge').jqxLinearGauge({ min: 0 });

    Best Regards,
    Dimitar

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

    October 15, 2012 at 8:28 pm remove negative value #9485

    cyberfilou
    Member

    hello,
    Where do I place the line
    $(‘#gauge’).jqxLinearGauge({ min: 0 });

    Thx

    <META HTTP-EQUIV="Refresh" CONTENT="30; URL=http://192.168.1.5/jqwidgets/test3.php"> 
    <?php
    $serveur = "localhost";
    $nom_base = "mygraph";
    $login = "********";
    $pwd = "********"; 
    mysql_connect ($serveur,$login,$pwd) or die ('ERREUR '.mysql_error()); 
    mysql_select_db ($nom_base) or die ('ERREUR '.mysql_error()); 
    $reponse = "SELECT MAX(id) AS id FROM mygraph_tbl WHERE ffeed='Puis_salon'";
    $requete = mysql_query ($reponse); 
    $resultat = mysql_fetch_array($requete);
    $maxId = $resultat['id'];
    mysql_connect ($serveur,$login,$pwd) or die ('ERREUR '.mysql_error()); 
    mysql_select_db ($nom_base) or die ('ERREUR '.mysql_error()); 
    $reponse1 = "SELECT fvalue FROM mygraph_tbl WHERE id= $maxId ";
    $requete1 = mysql_query ($reponse1);
    $resultat1 = mysql_fetch_array($requete1);
    $puis = $resultat1['fvalue'];
    ?>
    <html lang="en">
    <head>
        <meta name="keywords" content="jQuery Gauge, Gauge, Linear Gauge, Vertical Gauge, Horizontal Gauge" />
        <title id='Description'>This sample demonstrates the basic Linear Gauge settings.</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="scripts/jquery-1.8.0.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 = getTheme(),
                    majorTicks = { size: '10%', interval: 10 },
                    minorTicks = { size: '1%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
                    labels = { interval: 20 };
                
    			$('#gauge').jqxLinearGauge({
                    orientation: 'vertical',
                    labels: labels,
                    ticksMajor: majorTicks,
                    ticksMinor: minorTicks,
                    max: 120,
                    value: 0,
                    pointer: { size: '6%' },
                    colorScheme: 'scheme01',
                    ranges: [
                    { startValue: 0, endValue: 40, style: { fill: '#FFF157', stroke: '#FFF157'} },
                    { startValue: 40, endValue: 80, style: { fill: '#FFA200', stroke: '#FFA200'} },
                    { startValue: 80, endValue: 120, style: { fill: '#FF4800', stroke: '#FF4800'}}]
                });
    			
                $('#gauge').jqxLinearGauge('value',<?php echo $puis ;?> );
                $('#panel').jqxExpander({ width: 120, width: 280, height: 310, toggleMode: 'none', showArrow: false, theme: theme });
                $('#showAnimationButton').jqxButton({ width: 85, theme: theme });
                $('#isVerticalCheckbox').jqxCheckBox({ checked: true, theme: theme });
                $('#showTicksCheckbox').jqxCheckBox({ checked: true, theme: theme });
                $('#showLabelsCheckbox').jqxCheckBox({ checked: true, theme: theme });
                $('#showRangesCheckbox').jqxCheckBox({ checked: true, theme: theme });
                $('#showBackgroundCheckbox').jqxCheckBox({ checked: true, theme: theme });
                $('#labelsNearRadio').jqxRadioButton({ theme: theme, groupName: 'labels-position' });
                $('#labelsFarRadio').jqxRadioButton({ theme: theme, groupName: 'labels-position' });
                $('#labelsBothRadio').jqxRadioButton({ checked: true, theme: theme, groupName: 'labels-position' });
                $('#ticksNearRadio').jqxRadioButton({ theme: theme, groupName: 'ticks-position' });
                $('#ticksFarRadio').jqxRadioButton({ theme: theme, groupName: 'ticks-position' });
                $('#ticksBothRadio').jqxRadioButton({ checked: true, theme: theme, groupName: 'ticks-position' });
                $('#isVerticalCheckbox').bind('change', function (e) {
                    if (e.args.checked) {
                        $('#gauge').jqxLinearGauge('width', '100px');
                        $('#gauge').jqxLinearGauge('height', '300px');
                        $('#gauge').jqxLinearGauge('orientation', 'vertical');
                    } else {
                        $('#gauge').jqxLinearGauge('height', '100px');
                        $('#gauge').jqxLinearGauge('width', '300px');
                        $('#gauge').jqxLinearGauge('orientation', 'horizontal');
                    }
                });
                $('#showTicksCheckbox').bind('change', function (e) {
                    if (e.args.checked) {
                        majorTicks.visible = false;
                        minorTicks.visible = false;
                    } else {
                        majorTicks.visible = false;
                        minorTicks.visible = false;
                    }
                    $('#gauge').jqxLinearGauge('ticksMajor', majorTicks);
                    $('#gauge').jqxLinearGauge('ticksMinor', minorTicks);
                });
                $('#showLabelsCheckbox').bind('change', function (e) {
                    if (e.args.checked) {
                        labels.visible = true;
                    } else {
                        labels.visible = false;
                    }
                    $('#gauge').jqxLinearGauge('labels', labels);
                });
                $('#showRangesCheckbox').bind('change', function (e) {
                    if (e.args.checked) {
                        $('#gauge').jqxLinearGauge('showRanges', true);
                    } else {
                        $('#gauge').jqxLinearGauge('showRanges', false);
                    }
                });
                $('#showBackgroundCheckbox').bind('change', function (e) {
                    if (e.args.checked) {
                        $('#gauge').jqxLinearGauge('background', { visible: true });
                    } else {
                        $('#gauge').jqxLinearGauge('background', { visible: false });
                    }
                });
                $('#labelsNearRadio').bind('checked', function () {
                    labels.position = 'near';
                    $('#gauge').jqxLinearGauge('labels', labels);
                });
                $('#labelsFarRadio').bind('checked', function () {
                    labels.position = 'far';
                    $('#gauge').jqxLinearGauge('labels', labels);
                });
                $('#labelsBothRadio').bind('checked', function () {
                    labels.position = 'both';
                    $('#gauge').jqxLinearGauge('labels', labels);
                });
                $('#ticksNearRadio').bind('checked', function () {
                    $('#gauge').jqxLinearGauge('ticksPosition', 'near');
                });
                $('#ticksFarRadio').bind('checked', function () {
                    $('#gauge').jqxLinearGauge('ticksPosition', 'far');
                });
                $('#ticksBothRadio').bind('checked', function () {
                    $('#gauge').jqxLinearGauge('ticksPosition', 'both');
                });
                $('#showAnimationButton').bind('click', function () {
                    $('#gauge').jqxLinearGauge('animationDuration', 0);
                    $('#gauge').jqxLinearGauge('value',0);
                    $('#gauge').jqxLinearGauge('animationDuration', 1000);
                    $('#gauge').jqxLinearGauge('value', 0);
    			
                });
    			
            });
        </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 class="demo-gauge">
            <div id="gauge" style="margin-left: 20px; float: left;"></div>
            
            
        </div>
    </body>
    </html>
    October 16, 2012 at 5:02 am remove negative value #9500

    Dimitar
    Participant

    Hi cyberfilou,

    Here is where to insert the min property:

    $('#gauge').jqxLinearGauge({
                    orientation: 'vertical',
                    labels: labels,
                    ticksMajor: majorTicks,
                    ticksMinor: minorTicks,
                    min: 0,
                    max: 120,
                    value: 0,
                    pointer: { size: '6%' },
                    colorScheme: 'scheme01',
                    ranges: [
                    { startValue: 0, endValue: 40, style: { fill: '#FFF157', stroke: '#FFF157'} },
                    { startValue: 40, endValue: 80, style: { fill: '#FFA200', stroke: '#FFA200'} },
                    { startValue: 80, endValue: 120, style: { fill: '#FF4800', stroke: '#FF4800'}}]
                });

    Best Regards,
    Dimitar

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

    October 21, 2012 at 8:19 pm remove negative value #9799

    cyberfilou
    Member

    Thank you very much, it was so easy

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

You must be logged in to reply to this topic.