Time Sim

http://www.chartjs.org/samples/latest/scales/time/financial.html

by wrxsti85

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<div id="controls">
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <label>Target</label>
    <input name="target" type="number" step="0.01" />
    <button id="trend">Trend Control On</button>
    <label>Trend % Change</label>
    <input name="trend-percent" type="number" step="1" />
    <label>Trend Variance</label>
    <input name="trend-variance" type="number" step="0.01" />
    <label id="trend-status"></label>
</div>
<canvas id="chart"></canvas>
<div id="debug"></div>

CSS

#controls {
    position: fixed;
    top: 0px;
    left: 0px;
    background: #fff;
    border-bottom: solid 1px #000;
    width: 100%;
    padding: 5px;
    z-index: 99;
}

#chart {
    position: fixed;
    height: 400px;
    width: 100%;
    z-index: 98;
    background: #fff;
    top: 30px;
}

#debug {
    margin-top: 256px;
}

input[type="number"] {
    width: 50px;
}

JavaScript

let history = [],
    interval = 1,
    chartLimit = 2000, //ms
    time,
    chart,
    targetValue = 0.40,
    upThresh,
    downThresh,
    trendUp,
    trendControlEnabled = true,
    trendPercentChange = 30,
    trendVariance = 0.01,
    lowestValuePossible = 0.10;

function start() {
    let ctx = document.getElementById('chart').getContext('2d');
    //ctx.canvas.width = 1000;
    ctx.canvas.height = 400;
    let cfg = {
        type: 'bar',
        data: {
            labels: history.map(function(e) {
                return e._time;
            }),
            datasets: [{
                label: 'Time Sim',
                data: history.map(function(e) {
                    return e._data;
                }),
                type: 'line',
                pointRadius: 0,
                fill: true,
                lineTension: 0,
                borderWidth: 2
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    distribution: 'series',
                    ticks: {
                        source: 'labels'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Current price ($)'
                    }
                }]
            }
        }
    };

    chart = new Chart(ctx, cfg);
    let first = true;

    time = setInterval(function() {

        let now = new Date().getTime();
        let sec = new Sec(now, upThresh, downThresh);
        history.push(sec);

        if (history.length > chartLimit) {
            history.shift();
        }

        addData(chart, now, sec.data);

        if (chart.data.datasets[0].data.length > chartLimit || first) {
            removeData(chart);
            first = false;
        }

        let pre = $('<pre>').text(JSON.stringify(history, null, 4));
        //$('#debug').html(pre);

       ...