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
        lastX,
        lastY,
        chart = new Highcharts.StockChart({
            chart: {
                animation: false,
                renderTo: 'chart'
            },
            series: [{
                name: 'MSFT',
                data: MSFT.slice(0, 100)
            }],
            navigator: {
                enabled: false
            },
            yAxis: {
                endOnTick: false,
                startOnTick: false
            },
            scrollbar: {
                enabled: false
            }
        }),
        defaultX = chart.xAxis[0].getExtremes(),
        defaultY = chart.yAxis[0].getExtremes();



    $('#chart').mousedown(function () {
        mouseDown = true;
    })
        .mouseup(function () {
        mouseDown = false;
    })
        .mousemove(function (e) {
        if (mouseDown) {
            if (e.pageX > lastX) {
                var diff = e.pageX - lastX;
                var xExtremes = chart.xAxis[0].getExtremes();
                chart.xAxis[0].setExtremes(xExtremes.min - diff, xExtremes.max - diff);
            } else if (e.pageX < lastX) {
                var diff = lastX - e.pageX;
                var xExtremes = chart.xAxis[0].getExtremes();
                chart.xAxis[0].setExtremes(xExtremes.min + diff, xExtremes.max + diff);
            }

            if (e.pageY > lastY) {
                var ydiff = 1 * (e.pageY - lastY);
                var yExtremes = chart.yAxis[0].getExtremes();
                chart.yAxis[0].setExtremes(yExtremes.min + ydiff, yExtremes.max + ydiff);
            } else if (e.pageY < lastY) {
                var ydiff = 1 * (lastY - e.pageY);
                var yExtremes = chart.yAxis[0].getExtremes();
                chart.yAxis[0].setExtremes(yExtremes.min - ydiff, yExtremes.max - ydiff);
            }
        }
        lastX = e.pageX;
        lastY = e.pageY;
    })
        .dblclick(function (e) {
       ...