# Spline Update (special Chart)

> Spline차트에서 데이터를 실시간으로 업데이트합니다.

### Example

    var options = {
        chart: {
          type: 'spline',
        }
    }
    myChart.setOptions(options, {append : true, redraw:true});
    var series = myChart.series(0);
    // 최대 표현 갯수 지정
    var maxDataPoints = 20;
    // interval을 활용하여 데이터를 업데이트
    this.refreshInterval = setInterval(function () {
      var x = (new Date()).getTime(), // 현재시간
          y = Math.random(); //랜덤 데이터
      var isRedraw = series.getData().length >= maxDataPoints;
      if (series != -1) series.addPoint([x, y], {append:true, redraw:isRedraw});
      if (series.getData().length > maxDataPoints) {
        // 최대 갯수를 넘어가면 첫번째 데이터 삭제
        series.getData()[0].remove();
      }
    }, 1000);

    /** Highcharts에서는 addPoint 이벤트에서 데이터 업데이트 후 pulse효과를 주고있음.
     * 그러나 현재 IBChart에서는 addPoint 이벤트가 존재하지 않음.
     * addPoint 이벤트가 추가 되기 전까지는 Highchart의 addPoint를 활용.
     **/
    Highcharts.addEvent(Highcharts.Series, 'addPoint', e => {
      const point = e.point,
          series = e.target;

      if (!series.pulse) {
          series.pulse = series.chart.renderer.circle()
              .add(series.markerGroup);
      }

      setTimeout(() => {
          series.pulse
              .attr({
                  x: series.xAxis.toPixels(point.x, true),
                  y: series.yAxis.toPixels(point.y, true),
                  r: series.options.marker.radius,
                  opacity: 1,
                  fill: series.color
              })
              .animate({
                  r: 20,
                  opacity: 0
              }, {
                  duration: 1000
              });
      }, 1);
    });

### Since

version | desc
--- | ---
7.3.0.0 |