highstock

by Sajeetharan Sinnathurai

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="height: 500px"></div>
<button id="add">Add point</button>

JavaScript

$(function() {

    var dataIterator = 0;
    var startCandles = 10;
    var open, close = 300;
    var low, high, ohlcData = [];
    
    // get random point data
    function getPointData(date) {
        var change = (Math.sin(dataIterator / 2.5 + Math.PI) + Math.sin(dataIterator / 3) - Math.cos(dataIterator * 0.7)) * 150;
        change = change >= 0 ? change + 10 : change - 10;
        open = close;
        close = Math.max(50, open + change);
        low = Math.min(open, close) - (Math.cos(dataIterator * 1.7) + 1) * 15;
        low = Math.max(0, low);
        high = Math.max(open, close) + (Math.cos(dataIterator * 1.3) + 1) * 15;
        dataIterator++;
        return [date.getTime(), Math.round(open), Math.round(high), Math.round(low), Math.round(close), Math.round(high) - Math.round(low)];
    }
    
    // add point(candle) to the end of the chart
    function addPoint(data) {
        chart.series[0].addPoint([
            data[0], // the date
            data[1], // open
            data[2], // high
            data[3], // low
            data[4] // close
        ]);
    }
    
    // update last point(candle) on the chart
    function updateLastPoint(data) {
        if (ohlcData[ohlcData.length - 1][2] < data[2]) {
            ohlcData[ohlcData.length - 1][2] = data[2];
        }
        if (ohlcData[ohlcData.length - 1][3] > data[3]) {
            ohlcData[ohlcData.length - 1][3] = data[3];
        }

        ohlcData[ohlcData.length - 1][4] = data[4];
        chart.series[0].setData(ohlcData);
    }

    //  populate start data
    for (var i = 0; i < startCandles; i++) {
        (function(i) {
            var date = new Date();
            date.setMinutes(date.getMinutes() - startCandles + i);

            var data = getPointData(date);

            ohlcData.push([
                data[0], // the date
                data[1], // open
                data[2], // high
                data[3], // low
                data[4] // close
            ]);
    ...