title: Creating Heart Rate Monitor Chart using js
body: <p>I am creating a web app using angular js and javascript. In My application I
   am Creating a heart rate monitor chart using chart.js. I want my chart should continuously animate. Here is My Code.</p>
  
  <pre><code>function getActualData() {
      var actualData = []
      for (var m = 0; m &lt; 20; m++)
          actualData.push(45 + parseInt(Math.random() * 35))
      return actualData;
  }
  
  var ANIMATIONSTEPS = 200;
  
  var myLineChart;
  var labels;
  var animationStep;
  setInterval(function () {
      if (myLineChart === undefined) {
          var actualData = getActualData()
  
          var interpolationSteps = Math.ceil(ANIMATIONSTEPS / actualData.length);
          labels = []
          var data = []
          var blankData = []
          for (var i = 0; i &lt; (actualData.length - 1); i++) {
              labels.push('')
              data.push(actualData[i])
              blankData.push(null)
  
              // push interpolation
              var difference = actualData[i + 1] - actualData[i];
              var interpolationStep = 1 / interpolationSteps;
              for (var j = 1; j &lt; interpolationSteps; j++) {
                  labels.push('')
                  data.push(actualData[i] + difference * Chart.helpers.easingEffects["linear"](j * interpolationStep));
                  blankData.push(null)
              }
          }
          labels.push('')
          data.push(actualData[i])
          blankData.push(null)
  
          var data = {
              labels: labels,
              datasets: [
                  {
                      strokeColor: "rgba(243, 118, 27, 1)",
                      data: blankData
                  },
                  {
                      strokeColor: "transparent",
                      data: data
                  }
              ]
          };
  
          var ctx = document.getElementById("myChart").getContext("2d");
          myLineChart = new Chart(ctx).Line(data, {
              animation: false,
              datasetFill: false,
              pointDot: false,
              datasetStrokeWidth: 5,
              showTooltips: false,
              scaleOverride: true,
              scaleSteps: 12,
              scaleStepWidth: 5,
              scaleStartValue: 30,
              scaleShowVerticalLines: false,
              scaleShowLabels: false,
          });
  
          animationStep = 0;
      }
  
      // the actual animation
      myLineChart.datasets[0].points[animationStep].value = myLineChart.datasets[1].points[animationStep].value
      myLineChart.update();
      animationStep++;
  
      // start new cycle
      if (animationStep &gt;= labels.length) {
          myLineChart.destroy();
          myLineChart = undefined;
      }
  }, 10)
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/t795k4j3/" rel="nofollow">http://jsfiddle.net/t795k4j3/</a></p>