destegabry / angular-timeline

Angular directive to display an interactive visualization chart to visualize events in time.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

angular-timeline

A really simple angular directive to display a loader image while loading ajax resources, relying on Almende Timeline.

Added the range-popup item type to display contents on a tooltip when hovering, so you have to rely on Bootstrap tooltips.

Requirements

Include Almende Timeline (CSS, JS) and Bootstrap tooltip (CSS, JS) in your <head> section:

<link rel="stylesheet" href="PATH_TO_STYLES/bootstrap.css">
<link rel="stylesheet" href="PATH_TO_STYLES/timeline.css">

<script src="PATH_TO_LIB/timeline.js"></script>
<script src="PATH_TO_LIB/bootstrap-tooltip.js"></script>

Usage

Create a div with the timeline attribute to instantiate a Timeline. Data must be passed as an array of objects, read the Almende Timeline documentation on available fields.

<div timeline="data" 
  	 timeline-options="options"
     timeline-selection="selection"></div>

The timeline-options attribute provides access to Timeline configuration, read the Almende Timeline documentation on available options.

The timeline-selection attribute provides two-way binding on selected/selecting object.

Credits

Credits to Almende providing the excellent CHAP Links Library

About

Angular directive to display an interactive visualization chart to visualize events in time.

License:MIT License


Languages

Language:JavaScript 97.0%Language:CSS 3.0%