Home Reference Source 
import RadialGauge from 'canvas-gauges/lib/RadialGauge.js'
public class | source

RadialGauge

Extends:

EventEmitter → BaseGauge → RadialGauge

Minimalistic HTML5 Canvas Gauge

Example:

 var gauge = new RadialGauge({
    renderTo: 'gauge-id', // identifier of HTML canvas element or element itself
    width: 400,
    height: 400,
    units: 'Km/h',
    title: false,
    value: 0,
    minValue: 0,
    maxValue: 220,
    majorTicks: [
        '0','20','40','60','80','100','120','140','160','180','200','220'
    ],
    minorTicks: 2,
    strokeTicks: false,
    highlights: [
        { from: 0, to: 50, color: 'rgba(0,255,0,.15)' },
        { from: 50, to: 100, color: 'rgba(255,255,0,.15)' },
        { from: 100, to: 150, color: 'rgba(255,30,0,.25)' },
        { from: 150, to: 200, color: 'rgba(255,0,225,.25)' },
        { from: 200, to: 220, color: 'rgba(0,0,255,.25)' }
    ],
    colorPlate: '#222',
    colorMajorTicks: '#f5f5f5',
    colorMinorTicks: '#ddd',
    colorTitle: '#fff',
    colorUnits: '#ccc',
    colorNumbers: '#eee',
    colorNeedleStart: 'rgba(240, 128, 128, 1)',
    colorNeedleEnd: 'rgba(255, 160, 122, .9)',
    valueBox: true,
    animationRule: 'bounce'
});
// draw initially
gauge.draw();
// animate
setInterval(() => {
   gauge.value = Math.random() * -220 + 220;
}, 1000);

Static Method Summary

Static Protected Methods
protected static

configure(options: *): *

Checks and updates gauge options properly

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public set

value(value: number): *

Sets the value for radial gauge
public get

Returns current gauge value

Method Summary

Public Methods
public

Triggering gauge render on a canvas.

Inherited Summary

From class BaseGauge
public static get

Returns gauges version string
public static

ensureValue(value: *, min: number): number

Ensures value is proper number
public static

fromElement(element: HTMLElement)

Initializes gauge from a given HTML element (given element should be valid HTML canvas gauge definition)
public static

initialize(type: string, options: GenericOptions): *

Inject given gauge object into DOM
public static

mod(n: number, m: number): number

Corrects javascript modulus bug
protected static

configure(options: *): BaseGauge

Updates gauge options
public get

Returns current value of the gauge
public set

value(value: number): *

Sets new value for this gauge.
public
public
public

True if gauge has been drawn for the first time, false otherwise.
public

Gauge options
public

Gauge type class
public

Gauges version string
public

Performs destruction of this object properly
public abstract

Triggering gauge render on a canvas.
public

Updates gauge configuration options at runtime and redraws the gauge

Static Protected Methods

protected static configure(options: *): * source

Checks and updates gauge options properly

Override:

BaseGauge#configure

Params:

NameTypeAttributeDescription
options *

Return:

*

Public Constructors

public constructor(options: RadialGaugeOptions) source

Override:

BaseGauge#constructor

Params:

NameTypeAttributeDescription
options RadialGaugeOptions

Public Members

public set value(value: number): * source

Sets the value for radial gauge

Override:

BaseGauge#value

public get value: number: * source

Returns current gauge value

Override:

BaseGauge#value

Return:

number

Public Methods

public draw(): RadialGauge source

Triggering gauge render on a canvas.

Override:

BaseGauge#draw

Return:

RadialGauge