jQuery UI Widgets Forums Gauges and Maps Gauges remove negative value

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • remove negative value #9400

    cyberfilou
    Member

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

    • This topic was modified 8 years, 6 months ago by  cyberfilou.
    • This topic was modified 8 years, 6 months ago by  cyberfilou.
    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/

    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>
    • This reply was modified 8 years, 6 months ago by  cyberfilou.
    • This reply was modified 8 years, 6 months ago by  cyberfilou.
    • This reply was modified 7 years, 5 months ago by  cyberfilou.
    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/

    remove negative value #9799

    cyberfilou
    Member

    Thank you very much, it was so easy

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

You must be logged in to reply to this topic.