CODEWITHSUNDEEP
javascripthighcharts
Nem
Nem

Reputation: 456

Dynamic Highstock chart when no data at start

I'm new at highstock charts and i have some problems with it. I have the following highstok chart.

Highcharts.stockChart('chart1', {
    chart: {  
        events: {
            load: function () {             
                var series = this.series[0];                    
                setInterval(function () {                    
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series.addPoint([x, y], true, true);                        
                }, 1000);
            }
        }
    },    
    rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1M'
        }, {
            count: 5,
            type: 'minute',
            text: '5M'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 0
    },    
    title: {
        text: 'Random'
    },    
    navigator: {
        enabled: true
    },    
    exporting: {
        enabled: false
    },    
    series: [{
        name: 'Random',
        data: [[]]
    }]
});

Eveything looks normal, but if we run https://jsfiddle.net/9pa5gjqw/17/ we can see strange behaviour. There is no graph at all, we can see only points adding. But if I add some data in 'series' everything is ok.

What should be added to chart configuration? May be I missed someting.

Upvotes: 0

Views: 52

Answers (1)

ewolden
ewolden

Reputation: 5803

It looks strange because you are doing this:

series.addPoint([x, y], true, true);

With no points in the series. If we look at the addPoint() definition we have for the 3rd argument:

If true, a point is shifted off the start of the series as one is appended to the end.

So points are being removed just as they are added since there is 0 points in the series to begin with.

3 possible solutions, depending on what you want it to look like.

  1. Don't shift the series, just add points. Fiddle example
  2. Initialize the series with x number of values (I used 10 points) Fiddle example
  3. Don't shift for first x elements added, then shift. (I used 10 points) Fiddle example

Upvotes: 1

Related Questions