import RadialGauge from 'canvas-gauges/lib/RadialGauge.js'

public class | source

RadialGauge

Extends:

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);

Constructor Summary

Public Constructor
public	constructor(options: RadialGaugeOptions)

Method Summary

Public Methods
public	draw(): RadialGauge Triggering gauge render on a canvas.

Inherited Summary

From class BaseGauge
public static	initialize(Type: string, options: GenericOptions) Inject given gauge object into DOM
public get	value: number: * Returns current value of the gauge
public set	value(value: number): * Sets new value for this gauge.
public	animation: Animation
public	canvas: SmartCanvas
public	options: GenericOptions Gauge options
public	type: BaseGauge Gauge type class
public	destroy() Performs destruction of this object properly
public abstract	draw(): BaseGauge Triggering gauge render on a canvas.
public	update(options: RadialGaugeOptions): BaseGauge Updates gauge configuration options at runtime and redraws the gauge

Public Constructors

public constructor(options: RadialGaugeOptions) source

Override:

BaseGauge#constructor

Params:

Name	Type	Attribute	Description
options	RadialGaugeOptions

Public Methods

public draw(): RadialGauge source

Triggering gauge render on a canvas.

Override:

BaseGauge#draw

Return:

RadialGauge