### Usage

Source: https://github.com/bernii/gauge.js/blob/gh-pages/README.md

Example of how to use gauge.js to create and configure a gauge.

```javascript
var opts = {
  angle: 0.15, /// The span of the gauge arc
  lineWidth: 0.44, // The line thickness
  pointer: {
    length: 0.9, // Relative to gauge radius
    strokeWidth: 0.035 // The thickness
  },
  colorStart: '#6FADCF',   // Colors
  colorStop: '#8FC0DA',    // just experiment with them
  strokeColor: '#E0E0E0'   // to see which ones work best for you
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0);  // set min value
gauge.set(1250); // set actual value
```

--------------------------------

### Build instructions

Source: https://github.com/bernii/gauge.js/blob/gh-pages/README.md

Commands to install development dependencies and run the build process.

```bash
# Install development dependencies
npm install
# Run the build
npm run build
```

--------------------------------

### Gauge Pointer Tip Icon Options

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Example configuration for adding an icon to the gauge pointer tip.

```javascript
pointer: {
  // Extra optional pointer options:
  iconPath: 'myicon.png',  // Icon image source
  iconScale: 1,    // Size scaling factor
  iconAngle: 90.0  // Rotation offset angle, degrees
}
```

--------------------------------

### Tick Rendering Options

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Example configuration for rendering ticks with subdivisions.

```javascript
renderTicks: {
  divisions: 5,
  divWidth: 1.1,
  divLength: 0.7,
  divColor: #333333,
  subDivisions: 3,
  subLength: 0.5,
  subWidth: 0.6,
  subColor: #666666
}
```

--------------------------------

### Gauge Initialization and Options

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Example of initializing a Gauge with various options including static zones, limits, and high DPI support.

```javascript
var opts = { angle: 0.1, lineWidth: 0.4, radius: 0.45, // new
        pointer: { 
            length: 0.6, // new
            strokeWidth: 0.05, // new
            color: "#000000" // new
        }, 
        limitMax: false, // If true, the pointer will not go beyond the max value of the dataset
        limitMin: false, // If true, the pointer will not go beyond the min value of the dataset
        highDpiSupport: true, // High DPI support
        renderOnAnimation: true, // new
        staticZones: [
            {strokeStyle: "rgb(255,0,0)", min: 0, max: 500, height: 1.2},
            {strokeStyle: "rgb(200,100,0)", min: 500, max: 1000, height: 1.1},
            {strokeStyle: "rgb(150,150,0)", min: 1000, max: 1500, height: 1},
            {strokeStyle: "rgb(100,200,0)", min: 1500, max: 2000, height: 0.9},
            {strokeStyle: "rgb(0,255,0)", min: 2000, max: 3100, height: 0.8},
            {strokeStyle: "rgb(80,255,80)", min: 3100, max: 3500, height: 0.7},
            {strokeStyle: "rgb(130,130,130)", min: 2470, max: 2530, height: 1}
        ],
        // The following are new options for Gauge.js v2.0
        // You can find them all in the documentation
        // For example:
        // label: "Value",
        // percent: 0.75,
        //
        // You can also add custom labels:
        // labels: [
        //     // labels can be objects: {
        //     //     label: "0",
        //     //     font: "10px sans-serif",
        //     //     fillStyle: "#fff",
        //     //     //strokeStyle: "#fff",
        //     //     position: "50%", // position with relation to radius
        //     // },
        //     { label: "1000", font: "20px sans-serif", fillStyle: "#fff", position: "45%" },
        //     { label: "2000", font: "20px sans-serif", fillStyle: "#fff", position: "50%" },
        //     { label: "3000", font: "20px sans-serif", fillStyle: "#fff", position: "55%" },
        // ],
        //
        // You can also set the fraction digits for the value:
        // fractionDigits: 0
    };
    var demoGauge = new Gauge(document.getElementById("preview-textfield"));
    demoGauge.setOptions(opts);
    document.getElementById("preview-textfield").className = "preview-textfield";
    demoGauge.setTextField(document.getElementById("preview-textfield"));
    demoGauge.minValue = 0;
    demoGauge.maxValue = 3500;
    demoGauge.set(2122);
```

--------------------------------

### Static Zones Option

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Example of defining static colored zones on the gauge background.

```javascript
staticZones: [
   {strokeStyle: "#F03E3E", min: 100, max: 130}, // Red from 100 to 130
   {strokeStyle: "#FFDD00", min: 130, max: 150}, // Yellow
   {strokeStyle: "#30B32D", min: 150, max: 220}, // Green
   {strokeStyle: "#FFDD00", min: 220, max: 260}, // Yellow
   {strokeStyle: "#F03E3E", min: 260, max: 300}  // Red
]
```

--------------------------------

### Static Zones with Height Option

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Example of defining static colored zones with varying heights.

```javascript
staticZones: [
    {strokeStyle: "rgb(255,0,0)", min: 0, max: 500, height: 1.4},
    {strokeStyle: "rgb(200,100,0)", min: 500, max: 1000, height: 1.2},
    {strokeStyle: "rgb(150,150,0)", min: 1000, max: 1500, height: 1},
    {strokeStyle: "rgb(100,200,0)", min: 1500, max: 2000, height: 0.8},
    {strokeStyle: "rgb(0,255,0)", min: 2000, max: 3100, height: 0.6}
  ]
```

--------------------------------

### Table Layout for Multiple Gauges and Values

Source: https://github.com/bernii/gauge.js/wiki/How-to-Display-the-Value-of-the-Gauge-in-Text

Example HTML table structure for displaying multiple gauges and their corresponding text values with units.

```html
<table>
  <tr>
    <td><canvas id="gauge-foobar"></canvas></td>
    <td><canvas id="gauge-quux"></canvas></td>
    <td><canvas id="gauge-zorkmid"></canvas></td>
  </tr>
  <tr>
    <td><output id="value-foobar"></output> foobars</td>
    <td><output id="value-quux"></output> quuxes</td>
    <td><output id="value-zorkmid"></output> zorkmids</td>
  </tr>

</table>
```

--------------------------------

### Percentage Color Option

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Example of how to use the 'percentColors' option to control gauge behavior based on the displayed value.

```javascript
percentColors = [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]];
```

--------------------------------

### Additional Indicator Zone

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Example of using a narrow static zone with a tall height as an additional indicator.

```javascript
{strokeStyle: "rgb(80,80,80)", min: 2470, max: 2530, height: 1.3}
```

--------------------------------

### Gauge.js

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Initial release.

```javascript
prettyPrint();
$('#divisionsCbx').click(function(){
    $('.subDivisions').toggle();
    $('#subDivisions').toggle();
    fdSlider.redrawAll();
})

function update() {
    var opts = {};
    var tmp_opts = opts;
    tmp_opts.renderTicks = {};

    if ($('.subDivisions:visible').length) {
        $('.renderTicks').each(function() {
            var val = $(this).hasClass("color") ? this.value : parseFloat(this.value);
            if($(this).hasClass("color")){
                val = "#" + val;
            }
            if (this.name.indexOf("divLength") != -1 || this.name.indexOf("subLength") != -1) {
                val /= 100;
            }
            if (this.name.indexOf("divWidth") != -1 || this.name.indexOf("subWidth") != -1) {
                val /= 10;
            }
            $('#opt-' + this.name.replace(".", "-")).text(val);

            if(this.name.indexOf(".") != -1){
                var elems = this.name.split(".");
                for (var i=0; i < elems.length - 1; i++) {
                    if (!(elems[i] in tmp_opts)) {
                        tmp_opts.renderTicks[elems[i]] = {};
                    }
                    tmp_opts = tmp_opts.renderTicks[elems[i]];
                }
                tmp_opts.renderTicks[elems[elems.length - 1]] = val;
            } else if ($(this).hasClass("color")) {
                // color picker is removing # from color values
                opts.renderTicks[this.name] = "#" + this.value;
                $('#opt-' + this.name.replace(".", "-")).text("#" + this.value);
            } else {
                opts.renderTicks[this.name] = val;
            }
        });
    }

    $('.opts input[min"], .opts .color').not('.renderTicks').each(function() {
        var val = $(this).hasClass("color") ? this.value : parseFloat(this.value);
        if($(this).hasClass("color")){
            val = "#" + val;
        }
        if(this.name.indexOf("lineWidth") != -1 || this.name.indexOf("radiusScale") != -1 || this.name.indexOf("angle") != -1 || this.name.indexOf("pointer.length") != -1){
            val /= 100;
        }else if(this.name.indexOf("pointer.strokeWidth") != -1){
            val /= 1000;
        }
        $('#opt-' + this.name.replace(".", "-")).text(val);

        if(this.name.indexOf(".") != -1){
            var elems = this.name.split(".");
            var tmp_opts = opts;
            for(var i=0; i<elems.length - 1; i++){
                if(!(elems[i] in tmp_opts)){
                    tmp_opts[elems[i]] = {};
                }
                tmp_opts = tmp_opts[elems[i]];
            }
            tmp_opts[elems[elems.length - 1]] = val;
        }else if($(this).hasClass("color")){
            // color picker is removing # from color values
            opts[this.name] = "#" + this.value;
            $('#opt-' + this.name.replace(".", "-")).text("#" + this.value);
        }else{
            opts[this.name] = val;
        }

        if(this.name == "currval"){
            // update current demo gauge
            demoGauge.set(parseInt(this.value));
            AnimationUpdater.run();
        }
    });

    $('#opts input:checkbox').each(function() {
        opts[this.name] = this.checked;
        $('#opt-' + this.name).text(this.checked);
    });

    demoGauge.animationSpeed = opts.animationSpeed;
    opts.generateGradient = true;

    console.log(opts);
    demoGauge.setOptions(opts);
    demoGauge.ctx.clearRect(0, 0, demoGauge.ctx.canvas.width, demoGauge.ctx.canvas.height);
    demoGauge.render();

    if ($('#share').is(':checked')) {
        window.location.replace('#?' + $('form').serialize());
    }
}

function initGauge(){
    document.getElementById("class-code-name").innerHTML = "Gauge";
    demoGauge = new Gauge(document.getElementById("canvas-preview"));
    demoGauge.setTextField(document.getElementById("preview-textfield"));
    demoGauge.maxValue = 3000;
    demoGauge.set(1244);
};

function initDonut(){
    document.getElementById("class-code-name").innerHTML = "Donut";
    demoGauge = new Donut(document.getElementById("canvas-preview"));
    demoGauge.setTextField(document.getElementById("preview-textfield"));
    demoGauge.maxValue = 3000;
    demoGauge.set(1244);
};

function initZones(){
    document.getElementById("class-code-name").innerHTML = "Gauge";
    demoGauge = new Gauge(document.getElementById("canvas-preview"));
    var opts = {
        angle: -0.25,
        lineWidth: 0.2,
        radiusScale:0.9,
        pointer: {
            length: 0.6,
            strokeWidth: 0.05,
            color: '#000000'
        },
        staticLabels: {
            font: "10px sans-serif",
            labels: [200, 500, 2100, 2800],
            fractionDigits: 0
        },
        staticZones: [
            {strokeStyle: "#F03E3E", min: 0, max: 200},
            {strokeStyle: "#FFDD00", min: 200, max: 500},
            {strokeStyle: "#30B32D", min: 500, max: 2100},
            {strokeStyle: "#FFDD00", min: 2100, max: 2800},
            {strokeStyle: "#F03E3E", min: 2800, max: 3000}
        ],
        limitMax: false,
        limitMin: false,
        highDpiSupport: true
    };
    demoGauge.setOptions(opts);
    demoGauge.setTextField(document.getElementById("preview-textfield"));
    demoGauge.minValue = 0;
    demoGauge.maxValue = 3000;
    demoGauge.set(1244);
};

function initNew(){
    document.getElementById("class-code-name").innerHTML = "Gauge";
    demoGauge = new Gauge(document.getElementById("canvas-preview"));
    var bigFont = "14px sans-serif";
    var opts = {
        angle: 0.1,
        radiusScale:0.9,
        lineWidth: 0.2,
        pointer: {
            length: 0.6,
            strokeWidth: 0.05,
            color: '#000000'
        },
        staticLabels: {
            font: "10px sans-serif",
            labels: [{"la
```

--------------------------------

### Gauge Initialization and Configuration

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

This snippet demonstrates how to initialize and configure a Gauge object in JavaScript, including setting maximum values, applying options, and updating the gauge's value.

```javascript
var selectGauge2 = new Gauge(document.getElementById("select-2"));
selectGaguge2.maxValue = 3000;
selectGaguge2.set(1844);

selectGauge3 = new Gauge(document.getElementById("select-3"));
var opts = {
  angle: -0.25,
  lineWidth: 0.2,
  pointer: {
    length: 0.6,
    strokeWidth: 0.05,
    color: '#000000'
  },
  staticZones: [
    {strokeStyle: "#F03E3E", min: 0, max: 200},
    {strokeStyle: "#FFDD00", min: 200, max: 500},
    {strokeStyle: "#30B32D", min: 500, max: 2100},
    {strokeStyle: "#FFDD00", min: 2100, max: 2800},
    {strokeStyle: "#F03E3E", min: 2800, max: 3000}
  ],
  limitMax: false,
  limitMin: false,
  strokeColor: '#E0E0E0',
  highDpiSupport: true
};

selectGauge3.minValue = 0;
selectGauge3.maxValue = 3000;
selectGauge3.setOptions(opts);
selectGauge3.set(1607);

initGauge();
update();
```

--------------------------------

### Gauge Options

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Configuration options for creating a Gauge instance.

```javascript
var opts = {
  angle: 7, // The span of the gauge arc
  lineWidth: 5, // The line thickness
  radiusScale: 1.0, // Relative radius
  pointer: {
    length: 10, // // Relative to gauge radius
    strokeWidth: 0, // The thickness
    color: '#000000' // Fill color
  },
  limitMax: false,     // If false, max value increases automatically if value > maxValue
  limitMin: false,     // If true, the min value of the gauge will be fixed
  colorStart: '0',   // Colors
  colorStop: '0',    // just experiment with them
  strokeColor: '0',  // to see which ones work best for you
  generateGradient: true,
  highDpiSupport: true,     // High resolution support
  // renderTicks is Optional
  renderTicks: {
    divisions: 8,
    divWidth: 1,
    divLength: 0.8,
    divColor: '#333333',
    subDivisions: 3,
    subLength: 0.5,
    subWidth: 0.5,
    subColor: '#333333'
  }
  
};
var target = document.getElementById('foo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 3000; // set animation speed (32 is default value)
gauge.set(1500); // set actual value
```

--------------------------------

### Render Ticks Options

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Configuration options for rendering tick marks on the gauge.

```javascript
renderTicks: {
  divisions: 8,
  divWidth: 1,
  divLength: 0.8,
  divColor: '#333333',
  subDivisions: 3,
  subLength: 0.5,
  subWidth: 0.5,
  subColor: '#333333'
}
```

--------------------------------

### URL Parameter Handling and UI Updates

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

JavaScript code demonstrating how to parse URL parameters to pre-configure gauge settings and update the UI accordingly. It also handles UI element interactions like checkboxes and select lists.

```javascript
var params = {};
var hash = /^\?(.*)/.exec(location.hash);
if (hash) {
    $('#share').prop('checked', true);
    $.each(hash[1].split(/&/), function(i, pair) {
        var kv = pair.split(/=/);
        params[kv[0]] = kv[kv.length - 1];
    });
}

$('.opts input[min], #opts .color').each(function() {
    var val = params[this.name];
    if (val !== undefined) this.value = val;
    this.onchange = update;
});

$('.opts input[name=currval]').mouseup(function(){
    AnimationUpdater.run();
});

$('.opts input:checkbox').each(function() {
    this.checked = !!params[this.name];
    this.onclick = update;
});

$('#share').click(function() {
    window.location.replace(this.checked ? '#?' + $('form').serialize() : '#!');
});

$("#type-select li").click(function(){
    $("#type-select li").removeClass("active")
    $(this).addClass("active")
    var type = $(this).attr("type");
    if(type=="donut") {
        initDonut();
        $("input[name=lineWidth]").val(10);
        $("input[name=fontSize]").val(24);
        $("input[name=angle]").val(35);
        $("#preview-textfield").removeClass("reset");
        $("input[name=colorStart]").val("6F6EA0")[0].color.importColor();
        $("input[name=colorStop]").val("C0C0DB")[0].color.importColor();
        $("input[name=strokeColor]").val("EEEEEE")[0].color.importColor();
        fdSlider.disable('input-ptr-len');
        fdSlider.disable('input-ptr-stroke');
        $("#input-ptr-color").prop('disabled', true);
        selectGaguge1.set(1);
        selectGaguge2.set(3000);
        selectGauge3.set(1);
        selectGauge4.set(1);
    } else if (type=="zones") {
        initZones();
        fdSlider.disable('input-ptr-len');
        fdSlider.disable('input-ptr-stroke');
        $("#preview-textfield").removeClass("reset").addClass("reset");
        $("input[name=angle]").val(-20);
        $("input[name=lineWidth]").val(20);
        fdSlider.enable('input-ptr-len');
        fdSlider.enable('input-ptr-stroke');
        $("input[name=colorStart]").prop('disabled', true);
        $("input[name=colorStop]").prop('disabled', true);
        $("input[name=strokeColor]").prop('disabled', true);
        $("input[name=colorStop]").prop('disabled', true);
        $("input[name=strokeColor]").prop('disabled', true);
        selectGaguge1.set(1);
        selectGaguge2.set(1);
        selectGauge3.set(3000);
        selectGauge4.set(1);
    } else if (type=="new") {
        initNew();
        $("input[name=lineWidth]").val(30);
        $("input[name=fontSize]").val(41);
        $("input[name=angle]").val(10);
        $("#preview-textfield").removeClass("reset").addClass("reset");
        selectGaguge1.set(1);
        selectGaguge2.set(1);
        selectGauge3.set(1);
        selectGauge4.set(2213);
    } else{
        initGauge();
        $("input[name=lineWidth]").val(44);
        $("input[name=fontSize]").val(41);
        $("input[name=angle]").val(15);
        $("#preview-textfield").removeClass("reset").addClass("reset");
        $("input[name=colorStart]").val("6FADCF")[0].color.importColor();
        $("input[name=colorStop]").val("8FC0DA")[0].color.importColor();
        $("input[name=strokeColor]").val("E0E0E0")[0].color.importColor();
        fdSlider.enable('input-ptr-len');
        fdSlider.enable('input-ptr-stroke');
        $("#input-ptr-color").prop('disabled', false);
        selectGaguge1.set(3000);
        selectGaguge2.set(1) ;
        selectGauge3.set(1);
        selectGauge4.set(1);
    }
    //fdSlider.updateSlider('input-line-width');
    fdSlider.updateSlider('input-font-size');
    fdSlider.updateSlider('input-angle');
    $("#example").removeClass("donut, gauge").addClass(type);
    update();
});

selectGaguge1 = new Gauge(document.getElementById("select-1"));
selectGaguge1.maxValue = 3000;
selectGaguge1.set(1552);
selectGauge4 = new Gauge(document.getElementById("select-4"));
var opts2 = {
    angle: 0.1,
    lineWidth: 0.2,
    pointer: { 
        length: 0.5,
        strokeWidth: 0.05,
        color: '#000000'
    },
    staticZones: [
        {strokeStyle: "#F03E3E", min: 0, max: 500, height: 2},
        {strokeStyle: "#FFDD00", min: 500, max: 1000, height: 1.5},
        {strokeStyle: "#30B32D", min: 1000, max: 1500, height: 1},
        {strokeStyle: "#FFDD00", min: 1500, max: 2000, height: 0.7},
        {strokeStyle: "#F03E3E", min: 2000, max: 3000, height: 0.3}
    ],
    limitMax: false,
    limitMin: false,
    highDpiSupport: true
};
selectGauge4.minValue = 0;
selectGauge4.maxValue = 3000;
selectGauge4.setOptions(opts2);
selectGauge4.set(2122);
selectGaguge2 = new Donut(docu
```

--------------------------------

### Static Labels Option

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

Configuration for displaying static value labels on the gauge.

```javascript
staticLabels: {
  font: "10px sans-serif",  // Specifies font
  labels: [100, 130, 150, 220.1, 260, 300],  // Print labels at these values
  color: "#000000",  // Optional: Label text color
  fractionDigits: 0  // Optional: Numerical precision. 0=round off.
}
```

--------------------------------

### Setting Text Field with Precision

Source: https://github.com/bernii/gauge.js/wiki/How-to-Display-the-Value-of-the-Gauge-in-Text

Setting the text field with a specified precision for the displayed value.

```javascript
gauge.setTextField(document.getElementById("gauge-value"), 2);
```

--------------------------------

### Setting the Text Field for Gauge Value

Source: https://github.com/bernii/gauge.js/wiki/How-to-Display-the-Value-of-the-Gauge-in-Text

Calling the setTextField method on the gauge instance to link it to the HTML element.

```javascript
gauge.setTextField(document.getElementById("gauge-value"));
```

--------------------------------

### jQuery Plugin

Source: https://github.com/bernii/gauge.js/blob/gh-pages/index.html

A jQuery plugin for Gauge.js that simplifies its integration with jQuery projects.

```javascript
$.fn.gauge = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.gauge) {
      data.gauge.stop();
      delete data.gauge;
    }
    if (opts !== false) {
      data.gauge = new Gauge(this).setOptions(opts);
    }
  });
  return this;
};
```

--------------------------------

### HTML Element for Gauge Value

Source: https://github.com/bernii/gauge.js/wiki/How-to-Display-the-Value-of-the-Gauge-in-Text

An empty HTML element (span in this case) with an ID to hold the gauge value.

```html
<span id="gauge-value"></span>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.