Highcharts Stock Demo

by dirtyd77

HTML

<script src="http://www.highcharts.com/samples/data/three-series-1000-points.js"></script>
<script src="http://code.highcharts.com/stock/highstock.src.js"></script>
<p><span></span>
</p>
<div id="chart"></div>

JavaScript

$(function () {

    var mouseDown = false, //is mousedown
        rails = true, //on rails
        lastX,
        lastY,
        chart = new Highcharts.StockChart({ //chart
            chart: {
                animation: false,
                renderTo: 'chart'
            },
            series: [{
                animation:false,
                name: 'MSFT',
                data: MSFT.slice(0, 100)
            }],
            navigator: {
                enabled: false
            },
            yAxis: {
                endOnTick: false,
                startOnTick: false
            },
            scrollbar: {
                enabled: false
            }
        }),
        defaultX = chart.xAxis[0].getExtremes(), //original x extremes
        defaultY = chart.yAxis[0].getExtremes(); //original y extremes
chart.xAxis[0].zoomEnabled = false;
    console.log(chart.xAxis[0]);
    
    $('#chart').mousedown(function () {
        mouseDown = true;
    })
    .mouseup(function () {
        mouseDown = false;
    })
    .mousemove(function (e) {
       
        if (mouseDown) {
            var diff,
                extremes,
                ease = 25;
            
            if(!rails){
                extremes = chart.xAxis[0].getExtremes();
                if (e.pageX > lastX){
                    diff = e.pageX - lastX;
                    chart.xAxis[0].setExtremes(extremes.min - diff, extremes.max - diff);
                }else if (e.pageX < lastX) {
                    diff = lastX - e.pageX;
                    chart.xAxis[0].setExtremes(extremes.min + diff, extremes.max + diff);
                }
                extremes = chart.yAxis[0].getExtremes();
                if (e.pageY > lastY) {
                    diff = 1 * (e.pageY - lastY)/ease;
                    chart.yAxis[0].setExtremes(extremes.min + diff, extremes.max + diff);
                } else if (e.pageY < lastY) {
                    diff = 1 * (lastY - e.pageY)/ease;
                   ...