Redline.js

Highly flexible JavaScript-driven html gauge.

Live Demo

Features

• Lightweight
• Fully customizable via CSS
• Custom marks & aperture
• Compatible with jQuery

Usage

First add some style by hooking up redline.css. You can build your own theme by compiling src/scss/redline.scss with custom variables. You can also override basic style via CSS as the demo (demo/style.css) shows.

JavaScript

There are two ways of using Redline.js in a browser: with jQuery or without.

Using jQuery

Just point jQuery to your .gauge container and spice with some options.

$( '#gauge' ).redline( options );

When gauge is initialized, you can move it's arrow with point method:

$( '#gauge' ).redline( 'point', 5 );

This method takes new arrow position as an argument. Arrow position is an index of the mark it points to. If it's fractional, arrow will point between two marks.

Without jQuery

Redline can also be used as a class. All methods are the same, the only difference is how you call them:

var gauge = new Redline( options );

gauge.point( 5 );

// or

gauge.set( 'position', 5 );

Options

You can initialize Redline with a set of options.

var options = {
    aperture    : 240, // gauge's aperture in degrees
    marks       : [{ caption: '0', type: 'srart' }, 1, 2, 'stop'], // array of custom marks
    innerMarks  : true, // if true — marks are kept inside the gauge
    position    : 0 // default gauge position
}

$( '#gauge' ).redline( options );

Custimization

Redline.js gauge can be custimized entirely via CSS. Threre's also a possibility to customize each segment separately. To do so, just specify a type for a segment in options.marks array like this:

// ~~~
    marks: [
        { caption: 'R', type: 'red' },
        { caption: 'A', type: 'orange' },
        { caption: 'I', type: 'yellow' },
        { caption: 'N', type: 'green' },
        { caption: 'B', type: 'blue' },
        { caption: 'O', type: 'indigo' },
        { caption: 'W', type: 'violet' }
    ]
// ~~~

Type will be attached to a segment element as a class: .redline-dial-segment-*type* so you can specify custom styles for it's color, font, mark size etc.

There are also two default classes: .redline-dial-segment-warning and .redline-dial-segment-danger that are attached to penultimate and last segment respectively, but can be overrided in options.

You can found an example of fully customized gauge in demo/.

Installation

You can install Redline.js via npm:

npm install redline

Or bower

bower install redline