Motion Highcharts Fruit Consumption

by gokulmaha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<div id="play-controls">
    <button id="play-pause-button" class="fa fa-play" title="play"></button>
    <input id="play-range" type="range" value="0" min="0" max="8" />
    <output id="play-output" for="play-range" name="year">Week 1</output>
</div>

CSS

@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";
#container {
    height: 300px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
#play-controls {
    text-align: center;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
    padding: 5px 0 1em 0;
}
#play-controls * {
    display: inline-block;
    vertical-align: middle;
}
#play-pause-button {
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    border: 1px solid silver;
    border-radius: 3px;
    background: #f8f8f8;
}
#play-range {
    margin: 2.5%;
    width: 70%;
}
#play-output {
    font-family: Arial, Helvetica, sans-serif;
}

JavaScript

$(function () {

    var chart,
        dataSequence = [
        {
            name: 'Week 1',
            data: [1, 2, 2, 1, 1, 2, 2]
        }, {
            name: 'Week 2',
            data: [6, 12, 2, 3, 3, 2, 2]
        }, {
            name: 'Week 3',
            data: [4, 5, 6, 5, 5, 4, 9]
        }, {
            name: 'Week 4',
            data: [5, 5, 6, 6, 5, 6, 6]
        }, {
            name: 'Week 5',
            data: [6, 7, 7, 6, 6, 6, 7]
        }, {
            name: 'Week 6',
            data: [8, 9, 9, 8, 8, 8, 9]
        }, {
            name: 'Week 7',
            data: [9, 10, 4, 10, 9, 9, 9]
        }, {
            name: 'Week 8',
            data: [1, 10, 10, 10, 10, 11, 11]
        }, {
            name: 'Week 9',
            data: [11, 11, 12, 12, 12, 11, 11]
        }
    ];

    // Initiate the chart
    $('#container').highcharts({

        chart: {
            type: 'bar'
        },
        title: {
            text: 'Highcharts with time control - weeks'
        },
        subtitle: {
            text: 'Fruit consumption during a week'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 50,
            y: 50,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            categories: [
                'Monday',
                'Tuesday',
                'Wednesday',
                'Thursday',
                'Friday',
                'Saturday',
                'Sunday'
            ]
        },
        yAxis: {
            title: {
                text: 'Fruit units'
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' units'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillOpacity:...