jQWidgets jqxGauge LinearGauge showRanges Property

Last Updated : 21 Oct, 2021

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxGauge represents a jQuery gauge widget, it is an indicator within a range of values. We can use Gauges to show a value in a range of values in the data region, there are 2 types of gauges: RadialGauge and LinearGauge. The LinearGauge is a gauge widget that can be represented either horizontally or vertically & its value is represented linearly in a vertical manner from some values.

The showRanges property is used to set or return the showRanges property. i.e. this property specifies whether to show ranges in the LinearGauge. It accepts boolean type value and the default value is true.

Syntax:

It is used to set the showRanges property.

$('Selector').jqxLinearGauge({ showRanges : boolean });

It is used to return the showRanges property.

var showRanges= $('Selector').jqxLinearGauge('showRanges');

Linked Files: Download jQWidgets from the link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgauge.js”></script>

Example: The below example illustrates the jqxLinearGauge showRanges property in jQWidgets.

HTML

<!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.11.1.min.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxcore.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxchart.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxgauge.js"> 
    </script> 
  </head> 
  
  <body> 
    <center> 
      <h1 style="color: green">GeeksforGeeks</h1> 
      <h3>jQWidgets jqxLinearGauge showRanges property</h3> 
      <div id="gauge"></div> 
    </center> 
  
    <script type="text/javascript"> 
      $(document).ready(function () { 
        $("#gauge").jqxLinearGauge({ 
          max: 100, 
          min: -20, 
          value: 18, 
          ranges: [ 
            { 
              startValue: 18, 
              endValue: 40, 
              style: { 
                fill: "#25f700", 
              }, 
            }, 
            { 
              startValue: 40, 
              endValue: 65, 
              style: { 
                fill: "#ff0000", 
              }, 
            }, 
          ], 
          showRanges: false, 
        }); 
      }); 
    </script> 
  </body> 
</html>