gauge-shsh v2.0.0

gauge

Files

css/
   /styles.css          - styles for demo index.html pages
   /gauge.css           - styles for gauge
 js
   /gauge.js            - main component module
   /gauge-plugin.js     - jQuery plugin
   /gauge.min.js        - main module minified
   /gauge-plugin.min.js - jQuery plugin minified   
   /vendor/*.js         - external js libs (jQuery)
index.html              - demo file
package.json            - npm package description

Install and usage

native

1. Create container element on your page

<div id="container"></div>

2. Include gauge.js to your page

<script src="js/gauge.js"></script>

3. Create gauge object

// create gauge with default options
var gauge = new Gauge(document.getElementById("container"));
gauge.setValue(2.5);
// create gauge with some user options
var gauge1 = new Gauge(document.getElementById("container1"), {tickLabel: {interval: 40 }});

// create gauge at the same container and get error about this
var gauge2 = new Gauge(document.getElementById("container1"), {tickLabel: {interval: 40 }});
gauge2.lastError();

jQuery plugin

1. Create container element on your page

<div id="container"></div>

2. Include gauge.js to your page

<script src="js/gauge.js"></script>

3. Include gauge-plugin.js to your page

<script src="js/gauge-plugin.js"></script>

4. Apply plugin to container

//create gauge with user options
$("#container").gauge({value: 2.4});
// set value
$("#container").gauge('setvalue', 4);
// get last error
$("#container").gauge('lasterror');

npm

npm install gauge-shishigin
npm remove gauge-shishigin

Options

Description of options, using for gauge configuration.

    value: 0,                           // default value
    range: [0, 6],                      // range
    labels: {0: '0',                    // labels
             1: '1',
             2: '2',
             3: '3',
             4: '4',
             5: '5',
             6: '6'},
    zones: [                              // color zones
        {   length_quota: 0.6,
            color: '#8888FF'
        },
        {   length_quota: 0.3,
            color: '#FFFF00'
        },
        {   length_quota: 0.1,
            color: '#FF0000'
        }
    ],
    dial_indicator: {                     // dial indicator drawing parameters
        cx: 300,
        cy: 300,
        r: 200,
        sAngle: 210,
        eAngle: -30
    },
    tickLabel: {                          // tick label drawing parameters
        interval: 35                      // interval between dial indicator and tick label
    },
    tickLine: {                           // tick line drawing parameters
        interval: 10,                     // interval between dial indicator and tick line
        length: 10                        // length of tick line
    },
    meter_needle: {                       // meter needle drawing parameters
        circle_r: 10,
        interval: 10                      // interval between dial indicator and end of meter needle
    }