Home

Welcome to the Motion-Highcharts-Plugin wiki!

Usage

To start using the plugin, follow these three steps:

1. Import Motion Script

Import motion.js after you import Highcharts, Highmaps or Highstock:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="path/or/url/to/motion.js"></script>

2. Add Motion Options (Optional)

Add a motion: {} option object to your chart options. All settings are optional:

...
motion: {
    enabled: true, // bool. Defaults to true
    labels: [  // [Mixed]. Defaults to undefined and instead displays index
        2000, 2001, 2002, 2003, 2004, 2005,
        2006, 2007, 2008, 2009, 2010
    ],
    series: 0, // [int] or int. The series which holds points to update. Defaults to 0
    startIndex: 0 // int. The sequence index to start with. Defaults to the last sequence index.
    axisLabel: 'year', // string. Name-attribute of motion slider. Defaults to 'year'
    autoPlay : true, // bool. Defaults to false
    updateInterval: 10, // int. Defaults to 10
    magnet: {
        round: 'floor', // string. Math.round type. ceil / floor / round. Defaults to 'round'
        step: 0.02 // number. Defaults to 0.01
    },
    playIcon: "fa fa-play", // string. The class of the play/pause-button when paused (displaying play)
    pauseIcon: "fa fa-pause" // string.  The class of the play/pause-button when playing (displaying pause)
},
...

3. Add Motion Data

Add a sequence: [] array to each point with values to iterate through in ascending order:

...
series: [{
    name: 'Jane',
    data: [
        {
            y: 1,
            sequence: [1, 5, 2, 7, 7, 1, 6, 9, 2, 5, 1]
        }, {
            y: 3,
            sequence: [5, 5, 7, 7, 3, 8, 9, 9, 1, 7, 3]
        }
    ]
},
...

And that should be it!

Controls

Motion currently supports the following controls:

• play/pause clicking the play/pause button
• play/pause by hitting space
• play by calling Highcharts.charts[0].motion.play()
• pause by calling Highcharts.charts[0].motion.pause()
• reset by calling Highcharts.charts[0].motion.reset()
• navigating the motion slider by dragging the slider thumb
• navigating the motion slider by hitting the left and right arrow keys

NB! To make key input work, make sure the motion controls are in focus by selecting it first