Drag-and-drop time-planning library using HTML5 and the canvas element
Drag-and-drop time-planning library using HTML5 and the canvas element. Used by napchart.com
You can download the latest version of Napchart from the GitHub releases
To install via npm:
bash npm install napchart --save
It is easy to create a Napchart on your page. All you need is a
canvaselement, a resizer div and some javascript code
The second data parameter of
napchart.initdefines what data should initially be drawn to the napchart. The structure is simple like this
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 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 }
String that defines which shape you want
string = 'circle' || 'wide' || 'line
Number of how many lanes you want. Max 4 recommended
Array with objects that connects a color with a text string (tag). This replaces
typesfrom previous versions of napchart
colorTags = [ { color: 'red', tag: 'Sleep'}, ... ]
The third parameter of
napchart.initis an object where you can specify options. Here are the defaults
{ interaction: true, penMode: true, background: 'transparent', fontColor: '#aaaaaa' }
See CONTRIBUTING.md for a sweet introduction to the code-base