Press "Enter" to skip to content

Simple jQuery based Analog/Digital Gauge Plugin | simplegauge.js

jquery simple gauge is a simple jQuery extension for showing analog and/or digital scales that uses SVG and JavaScript to plot customizable analog or digital scales on a page.

jquery plugins download, jquery plugin free download, jquery plugins list, javascript plugin download, free jquery plugins

How to make use of it:

1. Import the jQuery library and the straightforward gauge plugin’s files into the HTML doc.

<link href="/path/to//jquery.simplegauge.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to//jquery.simplegauge.js"></script>

2. Create an empty DIV that may serve as a container for the SVG gauge.

<div id="example"></div>

3. Initialize the plugin to render a primary gauge on the web page.

$('#example').simpleGauge({
  value: 89.123456
});

4. Set the size of the gauge within the CSS.

#example {
  width: 16em;
  height: 16em;
}

5. Set the min/max values.

$('#example').simpleGauge({
  value: 89.123456,
  min: 0,
  max: 100,
});

6. Customize the looks of the gauge.

$('#example').simpleGauge({

  // gauge type
  type: 'analog digital',

  // container styles
  container: {
    style: {},
    size: 90
  },

  // gauge title
  title: {
    text: '',
    style: {
      padding: '5px 7px',
      'font-size': '30px'
    }
  },

  // digital gauge options
  digital: {
    text: '{value.1}',
    style: {
      padding: '5px 7px',
      color: 'auto',
      'font-size': '25px',
      'font-family': '"Digital Dream Skew Narrow","Helvetica Neue",Helvetica,Arial,sans-serif',
      'text-shadow': '#999 2px 2px 4px'
    }
  },

  // analog gauge options
  analog: {
    numTicks: 10,
    minAngle: 150,
    maxAngle: 390,
    lineWidth: 10,
    arrowWidth: 10,
    arrowColor: '#486e85',
    inset: false
  },

  // bar colors
  barColors: [
    [ 0,  '#666' ],
    [ 50, '#ffa500' ],
    [ 90, '#e01010' ]
  ],
  
});

7. Default gauge template.

$('#example').simpleGauge({

  template: [
    '<div class="simpleGauge_container">',
    '<div class="simpleGauge">',
    '<svg class="simpleGauge_bars simpleGauge_block" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>',
    '<div class="simpleGauge_marks simpleGauge_block"></div>',
    '<div class="simpleGauge_labels simpleGauge_block"></div>',
    '<div class="simpleGauge_digital"></div>',
    '<div class="simpleGauge_title"></div>',
    '</div>',
    '</div>'
  ].join(''),

});

Analog/Digital Gauge Plugin, jquery.simplegauge Github


See Demo And Download

Official Website(peterthoeny): Click Here

This superior jQuery/javascript plugin is developed by peterthoeny. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.