Gauge-js

Javascript-плагин для отображения круглой шкалы
Проект на Github

4 вида инициализации

1) Javascript. Подключив gauge.min.js вызвать функцию gauge(el, data, options):

var myGauge = gauge(document.querySelector(".gauge"), {
    level: 67, //уровень, на который указывает стрелка, в "%"
    marks: [0,1,2,3,4,5,6], // список меток
    colors: [ // список цветов, с предельными значениями в процентах
        {
            "threshold": 80,
            "value": "#F8F3BC"
        },
        {
            "threshold": 100,
            "value": "#E89483"
        }
    ]
}, {
    aperture: 270 // открытость шкалы, в градусах
});

2) jQuery. При наличии jQuery на странице плагин можно подключить так: $(el).gauge(data, options).

3) WebComponent (IE10+). Подключение кастомным html-тэгом. Подключаем webcomponents.js (ссылка), добавляем в шапку шаблон <link rel='import' href='gauge.html'>, добавляем тэг вида
<gauge-js level="90" marks="1,2,3" aperture="240" colors="80:#f8f3bc,100:#eee"></gauge-js>.
При изменении атрибутов элемент будет подхватывать эти изменения. Живой пример (с обработчиком на hover):

4) NodeJS. npm install gauge-js

var gauge = require("gauge-js");
gauge(el, data, options);

Настройка CSS

С помощью CSS настраивается толщина границ секторов, цвета, размеры шкалы и формат подписей.