Highcharts addPoint() calling in quick interval causing shape collapse of graph

Question

// To load chart
loadChart(): void {
    let initialCardiacSamples = this.cardiacSamples;
    this.ecgChart = Highcharts.chart(this.el.nativeElement, {
      chart: {
        type: 'line',
        backgroundColor: '#4d2700',
      },
      title: {
        text: 'ECG graph using Highcharts JS',
        style: {
          color: '#ffffff'
        }
      },
      xAxis: {
        type: 'number',
        tickPixelInterval: 150
      },
      yAxis: {
        title: {
          text: 'Amplitude',
          style: {
            color: '#ffffff'
          }
        },
        gridLineWidth: 0,
        minorGridLineWidth: 0,
        max: 600
      },
      series: [{
        name: 'ECG data',
        data: initialCardiacSamples,
        color: '#ffffff'
      }]
    });
  }
  
  // To update chart/ Calling update for every 300mili seconds here to take next data point
  updateChart(): void {
    let xAxisPoint = this.ecgChunkSize;
    this.interval = setInterval(() => {
    // Call addData() function to add next trace point to the graph
    this.addDataPoint(this.ecgChunkSize, xAxisPoint); 
    this.ecgChunkSize = this.ecgChunkSize + 1;
    xAxisPoint = xAxisPoint + 1;
    if(this.ecgChunkSize == this.ecgFileSize) {
    this.ecgChunkSize = 0;
    }
    }, 300);
}

// Method to add data and update the chart to make the graph real time
addDataPoint(index: number, xAxisPoint: number) : void {
  let iy = this.cardiacSamples[index].y;
  this.ecgChart.series[0].addPoint([xAxisPoint, iy], true, true);
  //Calling addDataPoint() above with redraw chart and shift as true
 }

.chart-container {
    display: block; 
    margin:0; 
    position: relative;
    height: calc(100vh - 450px - 40px);
    padding-top: 0;
}

<div #highchartsEcg class="chart-container"></div>

Here, I am calling updateChart() with addPoint() for every 300 miliseconds. With this interval it is very slower, but maintaining somewhat graph shape. But, if I call updateChart() with <=100 miliseconds, graph completely collapse and loses its shape. I need faster movement of graph for ECG, trying with Angular5 application. Find attached images of ECG graphs. Normal graph shape with 300ms interval Graph shape collapse with 100ms interval

I haven't put the complete code here. But inserted code is more than enough to understand the scenario with initial loading and periodic update of chart. Actually fetching data from back-end through signalR. — , Jun 28 '18 at 19:40

score 0 · Answer 1 · answered Jun 29 '18 at 11:46

0

I guess this is the same question as on github: https://github.com/highcharts/highcharts/issues/8548

It's probably caused by animation - by default, animation duration is 1second. If you update chart every ~100ms chart, then change animation duration too:

this.ecgChart.series[0].addPoint([xAxisPoint, iy], true, true, { duration: 95 });

Note: Animation duration should be smaller than update interval, so we are sure that animation will end.

answered Jun 29 '18 at 11:46

Paweł Fus

44,795
3
61
77

Fus ... Thanks for your solution. Yes, this is the same question that I raised in GitHub as well in the issues section. It is working fine after setting animation duration. Thanks a lot!! – Jul 02 '18 at 11:15

Highcharts addPoint() calling in quick interval causing shape collapse of graph

1 Answers1