Skip to content

Commit

Permalink
Move Usage from readme to wiki
Browse files Browse the repository at this point in the history
  • Loading branch information
larsac07 committed Aug 13, 2015
1 parent 74149f3 commit 92ee3c7
Showing 1 changed file with 1 addition and 59 deletions.
60 changes: 1 addition & 59 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,65 +12,7 @@ The Timeline Highcharts Plugin adds an interactive HTML5 timeline to any Highcha
* [Map (World) - bubbles](http://jsfiddle.net/gh/get/jquery/1.9.1/larsac07/Timeline-Highcharts-Plugin/tree/master/demos/map-world-bubbles-demo/)

## Usage
To start using the plugin, follow these three steps:

### 1. Import Timeline Script
Import `timeline.js` after you import Highcharts, Highmaps or Highstock:
```html
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="path/or/url/to/timeline.js"></script>
```

### 2. Add Timeline Options
Add a `timeline: {}` option object to your chart options:
```javascript
...
timeline: {
enabled: true, // optional. Defaults to true
timePoints: [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010], // required
series: 0, // required. The series which holds points to update. Integer or Array of integers
axisLabel: 'year', // optional. name-attribute of timeline slider. Defaults to 'year'
autoPlay : true, // optional. Defaults to false
updateInterval: 10, // optional. Defaults to 10
magnet: { // optional
round: 'floor', // optional. Math.round type. ceil / floor / round. Defaults to 'round'
step: 0.02 // optional. Defaults to 0.01
}
},
...
```

### 3. Add Timeline Data
Add a `data: []` array to each point with values to iterate through in ascending order:
```javascript
...
series: [{
name: 'Jane',
data: [
{
y: 1,
data: [1, 5, 2, 7, 7, 1, 6, 9, 2, 5, 1]
}, {
y: 3,
data: [5, 5, 7, 7, 3, 8, 9, 9, 1, 7, 3]
}
]
},
...
```
And that should be it!

## Controls
Timeline currently supports the following controls:
* play/pause clicking the play/pause button
* play/pause by hitting space
* play by calling `Highcharts.charts[0].timeline.play()`
* pause by calling `Highcharts.charts[0].timeline.pause()`
* reset by calling `Highcharts.charts[0].timeline.reset()`
* navigating the timeline by dragging the slider thumb
* navigating the timeline by hitting the left and right arrow keys

**NB!** To make key input work, make sure the timeline is in focus by selecting it first
Go see the [Usage Wiki page](https://github.com/larsac07/Timeline-Highcharts-Plugin/wiki)

## Reporting Issues
Before reporting an issue, please follow these guidelines:
Expand Down

0 comments on commit 92ee3c7

Please sign in to comment.