README
Redline.js
Highly flexible JavaScript-driven html gauge.
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