Skip to content

Minimalist timeline in javascript based on d3.js. This work was inspired by https://github.com/mquan/timeline

License

Notifications You must be signed in to change notification settings

junpls/timeknots

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

timeknots

Minimalist timeline in javascript

General Options

  • width: width of the visualization (default: 600 pixels)
  • height: height of the visualization (default: 200 pixels)
  • radius: radius of the knots (default: 10 pixels)
  • lineWidth: width of the lines used to draw timeknots (default: 4 pixels)
  • color: color used for the visualization (default: 999)
  • background: Background color of the visualization (default: FFF)
  • dateFormat: Format of the dates displayed (default: %Y/%m/%d %H:%M:%S)
  • horizontalLayout: orientation in which the timeknots will be displayed horizontal or vertical (default: true),
  • showLabels: Include labels showing the first and last dates (default: false)
  • labelFormat: Format used to display the dates in the labels (default: %Y/%m/%d %H:%M:%S)

Knot options

It is possible to include or override certain options for particular knots. These options are

  • img: Include the image in this URL when the tooltip is displayed
  • radius: Draw this knot with this particular radius
  • color: Draw this knot using this particular color
  • lineWidth: Draw thiw knot using this particular line width
  • background: Draw thiw knot using this particular background
  • selected: Display this node as selected

Examples

A set of example can be found at http://graves.cl/timeknots/example/index.html

About

Minimalist timeline in javascript based on d3.js. This work was inspired by https://github.com/mquan/timeline

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 67.9%
  • HTML 32.1%