title: Show data dynamically in line chart - ChartJS
body: <p>I need to show some data in my line graph in my Angular 6 app, after a certain amount of time, so lets say each 333ms to show some data. I am displaying data registered in max 30 sec, so every graph data can last maximum of 30 seconds. It has to start on a button click.</p>
  
  <p>Here is some test data I created just for testing purposes:</p>
  
  <pre><code>test_data = {
          '222': {
              joy: 66.5057373046875,
              fear: 1.0003513832343742,
              anger: 2.000018799044483,
              disgust: 3.004251452162862,
              sadness: 4.0001135088386945,
              contempt: 5.001299204188399,
              surprise: 6.203749045729637
          },
          '238': {
              joy: 97.06363677978516,
              fear: 17.500137131541123,
              anger: 27.00000593749519,
              disgust: 6.001324078417383,
              sadness: 21.000043172625737,
              contempt: 21.00033742573578,
              surprise: 32.62530106306076
          },
          '722': {
              joy: 66.5057373046875,
              fear: 60.000351383234374,
              anger: 70.00001879904448,
              disgust: 10.004251452162862,
              sadness: 92.0001135088387,
              contempt: 40.0012992041884,
              surprise: 50.20374904572964
          },
          '838': {
              joy: 97.06363677978516,
              fear: 15.000137131541123,
              anger: 64.50000593749519,
              disgust: 24.501324078417383,
              sadness: 31.500043172625737,
              contempt: 18.50033742573578,
              surprise: 6.2048268765211105
          },
          '1722': {
              joy: 66.5057373046875,
              fear: 54.000351383234374,
              anger: 72.00001879904448,
              disgust: 0.004251452162861824,
              sadness: 80.0001135088387,
              contempt: 20.0012992041884,
              surprise: 20.203749045729637
          },
          '2838': {
              joy: 95.37223815917969,
              fear: 41.000168004859006,
              anger: 62.00000752212509,
              disgust: 33.001674098544754,
              sadness: 3.000052563053032,
              contempt: 44.00044780407916,
              surprise: 4.204549819231033
          },
          '2839': {
              joy: 98.75503540039062,
              fear: 1.0001062582232407,
              anger: 1.0000043528652895,
              disgust: 1.0009740582900122,
              sadness: 2.000033782198443,
              contempt: 2.0002270473924,
              surprise: 1.2051039338111877
          }
      };
  </code></pre>
  
  <p>Here, these values '222', '238' etc, are milliseconds where these values need to be shown in the graph. I structured this data so I have arrays like this:</p>
  
  <pre><code>joyArray = {
      data: [66.5057373046875, 97.06363677978516, 66.5057373046875, 97.06363677978516, 66.5057373046875, 95.37223815917969, 98.75503540039062],
      label: '',
      borderColor: 'rgba(255, 217, 40, 1)',
      backgroundColor: 'transparent',
      fill: false
  };
  
  // push all arrays into this array to show it on the graph
  this.chartData.push(this.joyArray, this.fearArray, this.angerArray, this.disgustArray, this.sadnessArray,
              this.surpriseArray, this.contemptArray);
  </code></pre>
  
  <p>and so on, for every object property.</p>
  
  <p>My graph is implemented like this:</p>
  
  <pre><code>&lt;canvas id="chartCanvas"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>This is what it looks like:
  <a href="https://i.stack.imgur.com/KyZOc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KyZOc.png" alt="enter image description here"></a></p>
  
  <p>So I need to click on a button and show these values for each frame (222ms, 238ms...), anyone has an idea how to do this using chartJS?</p>
  
  <p><strong>EDIT:</strong> changed the structure of arrays, now it is an object with data inside. Draw chart function looks like this:</p>
  
  <pre><code>drawChart() {
          this.chart = new Chart('chartCanvas', {
              type: 'line',
              data: this.data,
              options: this.options
          });
      }
  </code></pre>
  
  <p>Data object: </p>
  
  <pre><code>data = {
      labels: [],
      datasets: [] // datasets = this.chartData;
  };
  </code></pre>