Highcharts Demo

author(s): Torstein Hønsi

by Ryan Brackett

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, ante quis scelerisque ornare, lacus nisl sodales libero, a malesuada lacus massa eget massa. Ut ac molestie enim. Cras tincidunt nec est eu euismod. Pellentesque venenatis velit felis, vel maximus lorem semper at. Donec pretium, tortor et molestie dictum, justo orci suscipit orci, in vestibulum odio elit eu leo. Ut metus nunc, ultrices eget commodo sed, pellentesque eu ex. Praesent in porta tortor. Sed lobortis tortor id luctus consectetur. Nam ut neque quis dui pellentesque malesuada. Nullam convallis nibh aliquet nisi porta, a pulvinar dui suscipit. Sed aliquam vehicula augue a molestie. In velit velit, ultricies ac venenatis id, venenatis ut nisi. Vivamus sit amet dolor venenatis, semper nisl vel, luctus elit. Proin varius felis metus. Curabitur justo risus, auctor vitae finibus ac, posuere sit amet eros. Fusce mauris diam, aliquam quis massa sed, sagittis iaculis augue. Suspendisse finibus consequat nibh, eget porta lacus viverra ac. Praesent laoreet tristique orci, id ultricies enim sollicitudin non. Phasellus eget magna odio. Mauris lacus mi, tincidunt sit amet arcu nec, mollis lobortis velit. Nunc sed magna sit amet erat iaculis aliquet a et massa. Nullam ullamcorper porta elit et varius. In non orci sit amet quam dictum semper commodo a nisl. Phasellus volutpat commodo venenatis. Mauris sed accumsan ligula, vel finibus risus. Cras sagittis lorem id porta sodales. Maecenas vel enim fringilla, dictum magna non, bibendum nibh. Aenean ornare eu augue ac aliquam. Suspendisse ornare id ante non mattis. Duis consequat, neque ac placerat consequat, tellus nunc hendrerit massa, quis aliquam ipsum urna et lorem. Sed a nibh hendrerit massa consectetur sagittis. Aenean luctus convallis lectus eget tincidunt. Etiam finibus libero sit amet...

JavaScript

$(window).scroll(function () {

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#container').offset().top,
    distance      = (elementOffset - scrollTop),
		window = $(window).height();
		
console.log (window - distance)

    if (distance - window <= 0) {
        $('#container').highcharts({

            chart: {
                animation: {
                    duration: 1500,
                    easing: 'easeOutBounce'
                }
            },

            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },

            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]

        });
    }
});