title: Dynamicly update scatter/line chart in Chart.JS with multiple x/y grids
body: <p>I would like to create a function that I can send data to push to my line chart. My function currently looks like this:</p>
  
  <pre><code>function addData(label, xp1, yp1, xp2, yp2) {
    chart.data.labels.push(label);
    chart.data.datasets.data.push({x: xp1, y: yp1}, {x: xp2, y: yp2}); 
    chart.update();
  }
  </code></pre>
  
  <p><em>label</em> is a string</p>
  
  <p><em>xp1, xp2, yp1, yp2</em> are doubles</p>
  
  <p>I am running a loop that will execute this function. Nothing happens and my chart remains blank.</p>
  
  <p>I have looked at the <a href="http://www.chartjs.org/docs/latest/developers/updates.html" rel="nofollow noreferrer">Chart.js docs</a> and it doesn't seem to be helpful for my situation and it appears they have errors in their example code</p>
  
  <p>This is my starting code:</p>
  
  <pre><code>var ctx = document.getElementById('chart').getContext('2d');
  var chart = new Chart(ctx, {
      type: 'line',
      data: {
          labels: [''],
          datasets: [{}]
      },
      options: {}
  });
  </code></pre>
  
  <p>This is what I expect it to look like once it's filled in:</p>
  
  <pre><code>var ctx = document.getElementById('chart').getContext('2d');
  var chart = new Chart(ctx, {
      type: 'line',
      data: {
          labels: ['a', 'b', 'c'],
          datasets: [{
              label: 'a',
              fill: false,
              data: [
                  {
                      x: 0,
                      y: 9
                  }, {
                      x: 3,
                      y: 9
                  }
              ]
          },
          {
              label: 'a',
              fill: false,
              data: [
                  {
                      x: 3,
                      y: 7
                  }, {
                      x: 5,
                      y: 7
                  }
              ]
          },
          {
              label: 'c',
              fill: false,
              data: [
                  {
                      x: 5,
                      y: 5
                  }, {
                      x: 10,
                      y: 5
                  }
              ]
          }]
      },
      options: {}
  });
  </code></pre>