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:

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