Need help with napchart?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

larskarbo
127 Stars 30 Forks GNU General Public License v3.0 489 Commits 6 Opened issues

Description

Drag-and-drop time-planning library using HTML5 and the canvas element

Services available

!
?

Need anything else?

Contributors list

# 360,178
JavaScr...
crdt
HTML
collabo...
437 commits
# 15,807
guidebo...
React N...
html5
lazy-lo...
3 commits
# 638,084
JavaScr...
2 commits
# 223,644
R
Jupyter...
Shell
cluster...
2 commits
# 765,025
JavaScr...
2 commits
# 772,124
JavaScr...
Ethereu...
1 commit
# 113,358
Rust
Shell
gameeng...
crates
1 commit
# 27,981
Swift
cocoapo...
Objecti...
swift-p...
1 commit
# 755,427
JavaScr...
1 commit
# 505,505
Shell
Python
forge
JavaScr...
1 commit

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:

bash
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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.