Animated streaming in seconds with a range into the future

by Jon Eyrick

HTML

<link rel="stylesheet" href="http://jsfiddle.chartiq.com/chart/css/stx-chart.css">
<div class="chartContainer" style="width:600px;height:400px;position:relative;"></div>

<!--[if IE 8]><script>alert("This template is not compatible with IE8");</script><![endif]-->

<script src="http://jsfiddle.chartiq.com/chart/js/chartiq.js"></script>
<script src="http://jsfiddle.chartiq.com/chart/js/addOns.js"></script>
<script src="http://jsfiddle.chartiq.com/chart/js/thirdparty/splines.js"></script>

JavaScript

function streamSimulation() {
    var price = 151.73;
    
    // if there is something in the masterData use the last element as the basis for our random seed
    if (stxx.chart.masterData.length) {
        price = stxx.chart.masterData[stxx.chart.masterData.length - 1].Close;
    }

    var change = Math.random() * (.1 +.1) -.1; // random between +/-0.1 of current price
    price = price + parseFloat(change.toFixed(2));
    var volume = Math.floor(Math.random() * 10) + 1  
    stxx.appendMasterData({"Last": price,"Volume":volume}, null, {fillGaps: true});
    setTimeout(streamSimulation, 700);
}

stxx = new CIQ.ChartEngine(
    {
        container: $$$(".chartContainer"),
        layout: {
            chartType: 'mountain',
            crosshair: true,
            periodicity: 1,
            timeUnit: 'second',
            interval: 1,
            candleWidth: 5,
        },
        streamParameters:{"maxWait":125},
    }
);

// Link an animator to each chart you want to animate by adding a line like this:
CIQ.Animation(stxx, {tension:0.3});

stxx.chart.xAxis.timeUnit = CIQ.SECOND;
stxx.chart.tension=0.3;  // if you want to soften the curves on a line or mountain chart.

// generate same sample data
now = new Date();
now.setMinutes(now.getMinutes() -1);
var sampleData=[
{"DT":new Date(now.setSeconds(1)),"Open":151.79,"High":151.8,"Low":151.6,"Close":151.75,"Volume":1817706},
{"DT":new Date(now.setSeconds(03)),"Open":151.74,"High":151.96,"Low":151.74,"Close":151.84,"Volume":2127911},
{"DT":new Date(now.setSeconds(04)),"Open":151.84,"High":152.03,"Low":151.79,"Close":151.95,"Volume":1640306},
{"DT":new Date(now.setSeconds(05)),"Open":151.95,"High":152.09,"Low":151.84,"Close":152.07,"Volume":1420396},
{"DT":new Date(now.setSeconds(06)),"Open":152.07,"High":152.08,"Low":151.87,"Close":151.91,"Volume":1312368},
{"DT":new Date(now.setSeconds(07)),"Open":151.92,"High":152.02,"Low":151.88,"Close":151.95,"Volume":1351448},
{"DT":new...