Skip to content

larskarbo/napchart

Repository files navigation

Napchart

npm version

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

enter image description here

Installation

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

To install via npm:

npm install napchart --save

Create a Chart

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>

Data

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

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 from previous versions of napchart

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

Options

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'
}

Contributing

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