Giter Club home page Giter Club logo

timeknots's Introduction

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

Examples

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

timeknots's People

Contributors

alangrafu avatar fdaudens avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

timeknots's Issues

Picture size for .svg files

.svg file are correctly appear as picture but we can't specify the size and it bent the picture

screenshot

I corrected it with css:

#timeline1 img{height: 100px; height: 100px; }

But it shoul be great to have a option to specify it

order of dates

When using Kubrick films, for example, the date order is oldest-to-newest.
How can I change the order from newest-to-oldest?
I see where the date is calculated
var timestamps = events.map(function(d){return d.value});
but do not see/know how to change the type of ordering (i.e. newest-to-oldest).
Thanks for assistance here.
/jay gray

show labels on all events

hi, Can I show labels on all timeline events instead of just start and end? And also, id there a way to add some text in the labels that show under the event?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.