title: How to implement ChartJS's Progressive Line in plain Javascript
body: <p>I am trying to replicate the Progressive Line display feature of ChartJs from <a href="https://www.chartjs.org/docs/latest/samples/animations/progressive-line.html" rel="nofollow noreferrer">this tutorial</a> and <a href="https://www.youtube.com/watch?v=0_jpfai4_4A" rel="nofollow noreferrer">this (albeit modified so that the chart will display after a button event)</a> for ASP.NET MVC.</p>
  <p>Currently, I am just using <code>math.random()</code> to create a dataset to test the logic first, so we will only be concerned with <strong>View codes</strong>.</p>
  <p><strong>View</strong></p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-4&quot; style=&quot;background-color: none&quot;&gt;
          &lt;button id=&quot;btndisplaygraph&quot; class=&quot;btn btn-success&quot;&gt;Display Graph&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;canvas id=&quot;chartJs_container&quot; width=&quot;400&quot; height=&quot;400&quot;&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;form&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;/div&gt;--&gt;
          &lt;div class=&quot;col-md-3&quot;&gt;
              &lt;label for=&quot;mqttT1&quot;&gt;Time (HH:MM:SS):&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-3&quot;&gt;
              &lt;input type=&quot;text&quot; id=&quot;mqttT1&quot; name=&quot;mqttT1&quot; readonly&gt;&lt;br&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;col-md-3&quot;&gt;
              &lt;label for=&quot;mqttP1&quot;&gt;Data:&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-md-3&quot;&gt;
              &lt;input type=&quot;text&quot; id=&quot;mqttP1&quot; name=&quot;mqttP1&quot; readonly&gt;&lt;br&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  @section Scripts
  {
      &lt;script type=&quot;text/javascript&quot;&gt;
  
      var ctx = document.getElementById(&quot;chartJs_container&quot;).getContext(&quot;2d&quot;);
  
      var dataPL = [];
      var data2PL = [];
      let prev = 100;
      let prev2 = 80;
      var i = 1;
      prev += 5 - Math.random() * 10;
      dataPL.push({ x: i, y: prev });
      prev2 += 5 - Math.random() * 10;
      data2PL.push({ x: i, y: prev2 });
      i++;
      var totalDuration = 10000;
      var delayBetweenPoints = totalDuration / dataPL.length;
      var previousY = (ctx) =&gt; ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
  
      $(document).ready(function () {
          Init();
      });
  
      function Init() {
          $(&quot;#btndisplaygraph&quot;).click(function () {
              DisplayLiveGraph();
          });
      };
  
      function DisplayLiveGraph() {
          const ChartPL = new Chart(ctx, {
              type: 'line',
              data: {
                  datasets: [{
                      borderColor: 'red',
                      borderWidth: 1,
                      radius: 0,
                      data: dataPL,
                  },
                  {
                      borderColor: 'blue',
                      borderWidth: 1,
                      radius: 0,
                      data: data2PL,
                  }]
              },
              options: {
                  animation: {
                      x: {
                          type: 'number',
                          easing: 'linear',
                          duration: delayBetweenPoints,
                          from: NaN, // the point is initially skipped
                          delay(ctx) {
                              if (ctx.type !== 'data' || ctx.xStarted) {
                                  return 0;
                              }
                              ctx.xStarted = true;
                              return ctx.index * delayBetweenPoints;
                          }
                      },
                      y: {
                          type: 'number',
                          easing: 'linear',
                          duration: delayBetweenPoints,
                          from: previousY,
                          delay(ctx) {
                              if (ctx.type !== 'data' || ctx.yStarted) {
                                  return 0;
                              }
                              ctx.yStarted = true;
                              return ctx.index * delayBetweenPoints;
                          }
                      }
                  },
                  interaction: {
                      intersect: false
                  },
                  plugins: {
                      legend: false
                  },
                  scales: {
                      x: {
                          type: 'linear'
                      }
                  }
              }
          });
  
          setInterval(function () {
              prev += 5 - Math.random() * 10;
              dataPL.push({ x: i, y: prev });
              prev2 += 5 - Math.random() * 10;
              data2PL.push({ x: i, y: prev2 });
              delayBetweenPoints = totalDuration / dataPL.length;
              previousY = (ctx) =&gt; ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
  
              i++;
              document.queryselector('input[name=&quot;mqttt1&quot;]').value = data.datasets[0].x;
              document.queryselector('input[name=&quot;mqttp1&quot;]').value = data.datasets[0].y;
              ChartPL.update();
          }, 1000);
      }
  
      &lt;/script&gt;
  }
  </code></pre>
  <p>I am facing Two Issues:</p>
  <ol>
  <li>Perhaps of the way I changed the tutorial code, whenever the ChartJS updates, it only shows 1 Point every time. Thus, <strong>I am not sure how I can amend the code to display a Progressive Line</strong>.</li>
  <li>When utilising <code>document.queryselector</code>, there is an uncaught error: <code>TypeError: document.queryselector is not a function</code>.</li>
  </ol>