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:

npm install napchart --save

It is easy to create a Napchart on your page. All you need is a canvas element, a resizer div and some javascript code

<div style="width:400px;height:400px">
	<canvas id="myNapchart"></canvas>
</div>
<script>
var ctx = document.getElementById("myNapchart").getContext('2d')
var myNapchart = Napchart.init(ctx, {
	// data goes here
	elements: [{
		"start":720,
		"end": 790,
		"text": "Cool text"
	},{
		"start":1420,
		"end":400
	}]
}, {
	// options go here
)
</script>

The second data parameter of napchart.init defines 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 types from previous versions of napchart

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

The third parameter of napchart.init is 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