skyline

A bar graph that displays information in real time using canvas.

Live Demo

Check out the live demo on CodePen, which uses the stand-alone files.

Installation

Ensure component(1) is installed, then:

$ component install tanem/skyline

Stand-alone

This library may be used stand-alone without the component tool. To build the stand-alone files, ensure UglifyJS2 is installed, then:

$ make standalone

Then add ./standalone/skyline.css and ./standalone/skyline.js to your application and reference the Skyline global.

Unit Tests

To run the unit tests, ensure testling is installed. Then:

$ make test

API

new Skyline

Initialize a new Skyline.

Skyline#barSpacing(barSpacing:Number)

Set the bar spacing.

skyline.barSpacing(3)

Skyline#barWidth(barWidth:Number)

Set the bar width.

skyline.barSpacing(5)

Skyline#gutter(gutter:Number)

Set the gutter.

skyline.gutter(50)

Skyline#width(width:Number)

Set the width.

skyline.width(600)

Skyline#height(height:Number)

Set the height.

skyline.height(300)

Skyline#backgroundBarColour(backgroundBarColour:String)

Set the background bar colour.

skyline.backgroundBarColour('#dedede')

Skyline#historyBarColour(historyBarColour:String)

Set the history bar colour.

skyline.historyBarColour('#ababab')

Skyline#axesFont(axesFont:String)

Set the axes font.

skyline.axesFont('14px sans-serif')

Skyline#frameRate(frameRate:Number)

Set the frame rate (fps).

skyline.frameRate(30)

Skyline#addHit

Add a hit to the graph.

skyline.addHit()

Skyline#start

Start the graph animation.

skyline.start()