CODEWITHSUNDEEP
javascripthighcharts
Joakim Carlsson
Joakim Carlsson

Reputation: 13

Update all Highcharts chart series synchronously

I use the code below to display Highchart with 3 signals in it, that are updated periodically with animation. But the problem is that for 2 of the signals the dots are updated first and then the curve slides into the dots. When I only have one signal it looks better, the dots never "jump" out of the curve. How do I update all the curves without the dots "jump" out of the graph?

    <!DOCTYPE html>
    <html lang="en">
    <head>
    </head>
      
    <body>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    
           
    <script type="text/javascript">
    
    $(document).ready(function () {
      function initData()
      {
        var data = [];
        var time = Date.now();
        for (var i = -60; i <= 0; i += 1) {
            data.push({ x: time + i * 1000, y: 0 });
        }
        return data;
      }
    
      Highcharts.chart('container', {
        chart: {
        type: 'spline',
        animation: { duration:500}, //false,
        events: {
          load: function () {
            var series = this.series;
            var len  = series.length;
            setInterval(function () {
              var t = Date.now();
              for (var j = 0; j < len; j++) {
                series[j].addPoint([t, Math.random()], true, true);
              }  
            }, 1000);
          }
        }
        },
        title: {text: 'Live random data'},
        xAxis: {type: 'datetime', tickPixelInterval: 150 },
        yAxis: {title: {text: 'Value' }, plotLines: [{value: 0, width: 1, color: '#808080'}] },
        legend: { enabled: false },
        exporting: { enabled: false },
            series:
            [
              { name: 'Random data', data: initData() },
              { name: 'Signal2', data: initData() },
              { name: 'Signal3', data: initData() }
            ]
        });
    });
    </script>
      
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
    
    </body>
    </html>

Upvotes: 1

Views: 716

Answers (1)

ewolden
ewolden

Reputation: 5803

Looking at the API, it says the following on adding points:

redraw Boolean

Whether to redraw the chart after the point is added. When adding more than one point, it is highly recommended that the redraw option be set to false, and instead Highcharts.Chart#redraw is explicitly called after the adding of points is finished. Otherwise, the chart will redraw after adding each point.

Changing so that redraw is done after all points are added, your problem seems to be solved.

load: function () {
  var series = this.series;
  var len  = series.length;
  setInterval(function () {
    var t = Date.now();
    for (var j = 0; j < len; j++) {
      series[j].addPoint([t, Math.random()], false, true); //set redraw to false
    }
    chart.redraw(); //added a redraw here
  }, 1000);
}

Working example: https://jsfiddle.net/ewolden/q489nsgw/4/

API on addPoint: http://api.highcharts.com/class-reference/Highcharts.Series#addPoint

Upvotes: 1

Related Questions