Highcharts / HighStock problem, streak disappears on dynamic refresh

I have this large inventory consuming JSON api. Every n seconds, the chart resembles the API for delta points.

After a few minutes, the streak on the left side will disappear, however if you click on it, the marks still appear. Happens on Mac and Windows, FF IE Chrome and Safari. Would be grateful for any help.

You can watch a demo here:

https://dev-mv-charts.azurewebsites.net/goldarea.htm

Update: If I use the code below, take from a high standards site, it seems to work. Just need to replace the initial load with random data.

$(function () {

Highcharts.setOptions({
    global : {
        useUTC : true
    }
});

// Create the chart
$('#container').highcharts('StockChart', {
    chart : {
        events : {
            load : function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {

                    var _update_url = 'http://api.bullionmark.com/v1/ask?currencyId=2&commodityId=1';

                    $.ajax({
                        type: 'GET',
                        url: _update_url}).done(function (resp1) {

                            var x2 = parseInt(resp1.Timestamp) * 1000;
                            var y2 = parseFloat(resp1.Current);

                            //var x = (new Date()).getTime(), // current time
                            //y = Math.round(Math.random() * 100);

                            series.addPoint([x2, y2], true, true);

                        });

                }, 5000);
            }
        }
    },

    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
        }, {
            count: 5,
            type: 'minute',
            text: '5M'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 0
    },

    title : {
        text : 'Live random data'
    },

    exporting: {
        enabled: false
    },

    series : [{
        name : 'Random data',
        type : 'area',
        data : (function () {
            // generate an array of random data
            var data = [], time = (new Date()).getTime(), i;

            for (i = -999; i <= 0; i += 1) {
                data.push([
                    time + i * 1000,
                    Math.round(Math.random() * 100)
                ]);
            }
            return data;
        }())
    }]
});

});

      

+3


source to share





All Articles