JSFiddle - React, Tailwind, and code Playground

by saitam

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container" style="height: 460px"></div>

JavaScript

$(function () {
    /**
     * Load new data depending on the selected min and max
     */
    function afterSetExtremes(e) {

        var chart = Highcharts.charts[0];
        chart.showLoading('Data loading ...');
        $.getJSON('http://46.101.198.242/data4?start=' + Math.round(e.min / 1000) + '&end=' + Math.round(e.max / 1000), function (data) {

            var ohlc = [],
                volume_neg = [],
                volume_pos = [],
                dataLength = data.length,
                i = 0;

            for (i; i < dataLength; i += 1) {
                ohlc.push([
                    data[i]['0'], // date    
                    data[i]['1'], // open  
                    data[i]['2'], // high    
                    data[i]['3'], // low    
                    data[i]['4'] // close  
                ]);

                volume_neg.push([
                    data[i]['0'], // the date
                    data[i]['5'] // the volume
                ]);

                volume_pos.push([
                    data[i]['0'], // the date
                    data[i]['6'] // the volume
                ]);
            }
            //chart.plotOptions.series.dataGrouping.enabled = true;
            chart.series[0].setData(ohlc);
            chart.series[1].setData(volume_neg);
            //chart.series[1].setData(volume_pos);

            chart.hideLoading();
        });
    }

    var initTimeStart = 1481897400
    //var initTimeStart = (Date.now() / 1000) - 604800
    //initTimeStart = parseInt(initTimeStart)    
    var initTimeEnd = (Date.now() / 1000) //- 300
    initTimeEnd = parseInt(initTimeEnd)    

    $.getJSON('http://46.101.198.242/data4?start=' + initTimeStart + '&end=' + initTimeEnd, function (data) {

         // split the data set into ohlc and volume
            var ohlc = [],
                volume_pos = [],
                volume_neg = [],
                dataLength = data.length,
                i = 0;

            for (i; i <...