title: Creating and Updating Graph in HTML and Javascript
body: <p>I have a website that calls to a function that randomly picks a number to 2 decimal places e.g. </p>
  
  <p>(5.53)</p>
  
  <p>Here is that code:</p>
  
  <pre><code>randomnum = Math.floor(Math.random() * (1000 - 100) + 100) / 100;
  </code></pre>
  
  <p>(this gives me a value between 1 and 10 to 2 decimal places)</p>
  
  <p>The website then counts to this number in increments of 0.01 and when it reaches the value it stops and then loops creating another random number and starts counting again.</p>
  
  <pre><code>if (randomnum &lt; c) {
      c = 0;
      stopCount() }
  </code></pre>
  
  <p>(c is the counter value which increments by 0.01 every 20ms)</p>
  
  <p>I'm trying to create a line graph that shows the increments and updates, THIS IMAGE IS FOR A VISUAL AID ONLY, I DO NOT HAVE A WORKING VERSION. <a href="https://i.stack.imgur.com/nW1vp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nW1vp.png" alt="this is the basic version now which i cannot get to update"></a></p>
  
  <p>This code below is what i'm currently using to get the general shape, I did not originally create this code. here is a link to the source im using. <a href="http://www.chartjs.org/docs/latest/charts/line.html" rel="nofollow noreferrer">http://www.chartjs.org/docs/latest/charts/line.html</a></p>
  
  <pre><code>function renderchart() {
  var ctx = document.getElementById("bettingarea").getContext('2d');
  var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: [ "1", "2", "3", "4",],
      datasets: [{
          label: 'Crash Graph',
          data: [5.44, 5.67, 5.94, 6.12,],
          backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
              'rgba(255,99,132,1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
      }]
  },
  options: {
      scales: {
          yAxes: [{
              ticks: {
                  beginAtZero:false
              }
          }]
      }
  }
  });
  }
  </code></pre>
  
  <p>The same website has this <a href="http://www.chartjs.org/docs/latest/developers/updates.html" rel="nofollow noreferrer">http://www.chartjs.org/docs/latest/developers/updates.html</a></p>
  
  <p>Which I cannot seam to get working no matter what i do :(</p>
  
  <p>I suppose what i'm asking is if there is a easier way of doing this, and if not please can you help get this updatedata set function working</p>
  
  <p>Thank you for any help provided :)</p>
  
  <p>UPDATE: custom pseudocode (I imagine it working like so)</p>
  
  <pre><code>GENERATE RANDOM = randomnum
  START TIMER
  UPDATE canvasgraph TO x.seconds AND y.timer
  TIMER = TIMER + 0.01 
  IF TIMER &gt; randomnum
  THEN STOP.timer
  END LOOP
  ELSE 
  CONTINUE TIMER
  START LOOP AGAIN
  </code></pre>
  
  <p>this is a really basic form of the code, and only acts as a visual aid for people trying to visualize the code, also I know i'm not using correct pseudocode terminology </p>