Gauge.js demo page

Простой вызов без параметров

javascript:

gauge1 = new Gauge({},document.getElementById("demo1"));

Пример из тестового задания

javascript:

gauge2 = new Gauge({
width: 500,
height:500,
aperture: 240,
radius: 175,
areas:[
	{
		color: '#ffa500',
		start: 150,
		end: 190
	},
	{
		color: 'red',
		start: 190,
		end: 210
	}
],
values:[0,1,2,3,4,5,6],
angle: 2/3,
scaleInside : false,
arrowColor: '#1e98e4',
dotColor: '#777',
font: '18px Arial',
textColor: '#777',
arcWidth: 3
}, 
document.getElementById("demo2"));
		

"Вольтметр"

javascript:

gauge3 = new Gauge({

aperture: 90,
radius: 100,
areas:[

	{
		color: 'red',
		start: 135,
		end: 145
	}
],
values:[0,1,2,3,4,5,6,7,8,9,10],
angle: 1/3,
scaleInside : false,
arrowColor: '#1e98e4',
dotColor: '#777',
font: '10px Arial',
textColor: '#777',
arcWidth: 1,
arrowColor: 'lightgray',

}, 
document.getElementById("demo3"));
		

"Спидометр"

javascript:

gauge4 = new Gauge({

aperture: 270,
radius: 100,
areas:[
	{
		color: 'green',
		start: -45,
		end: -18
	},
	{
		color: 'limegreen',
		start: -18,
		end: 20
	},
	{
		color: 'orange',
		start: 180,
		end: 198
	},
	{
		color: 'red',
		start: 198,
		end: 225
	}
],
values:[0, 'min', 20, 30, 40, 50, 60, 70, 80, 90, 'max'],
angle: 0.75,
scaleInside: true

}, 
document.getElementById("demo4"));
		

Инопланетное нечто

javascript:

gauge5 = new Gauge({

aperture: 150,
radius: 100,
areas:[

	{
		color: '#eee',
		start: 170,
		end: 370
	}
],
values:['£','¥','Δ','Ω','∑', '∴'],
angle: 0.75,
arcWidth: 10,
font: '16px Arial',
arrowColor: 'limegreen',

}, 
document.getElementById("demo5"));

		

Таймер

javascript:

gauge6 = new Gauge({

aperture: 360,
radius: 50,

values:[6,7,8,9,10,11,12,1,2,3,4,5,''],

angle: 0.25,
arcWidth: 3,
arrowColor: '#000',
arcColor: '#000',
dotColor: '#000',
textColor: '#000'
}, 
document.getElementById("demo6"));