Napchart

Drag-and-drop time-planning library using HTML5 and the canvas element. Used by napchart.com

Installation

You can download the latest version of Napchart from the GitHub releases

To install via npm:

bash
npm install napchart --save

Create a Chart

It is easy to create a Napchart on your page. All you need is a

canvas

Data

The second data parameter of

napchart.init

var defaultData = {
  elements: [],
  shape: 'circle',
  lanes: 1,
  colorTags,
}

You don't need to specify shape or lanes if you don't want to. If you don't specify anything at all it will start with a blank napchart

Elements

Elements are structured like this

var element = {
  start: Number, // between 0 and 1440
  end: Number, // between 0 and 1440
  lane: Number || 0, // must not be higher or equal to chart.data.lanes
  text: String || '',
  color: Color || chart.config.defaultColor // string (red, blue...) or hex (#ffffff)
  id: Number, // automatically generated
}

Shape

String that defines which shape you want

string = 'circle' || 'wide' || 'line

Lanes

Number of how many lanes you want. Max 4 recommended

ColorTags

Array with objects that connects a color with a text string (tag). This replaces

types

colorTags = [
  { color: 'red', tag: 'Sleep'},
  ...
]

Options

The third parameter of

napchart.init

{
    interaction: true,
    penMode: true,
    background: 'transparent',
    fontColor: '#aaaaaa'
}

Contributing

See CONTRIBUTING.md for a sweet introduction to the code-base